用于div内的循环附加div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用于div内的循环附加div相关的知识，希望对你有一定的参考价值。
嗨，我想问一下当前正在我的代码中执行的循环，我正在手动执行此操作，并且正在手动执行
$( '<div id="demo1" > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[0] );
$( '<div id="demo2"> <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[1] );
但是我正在尝试购买功能，直到div id demo10这就是我试图在for循环中实现的方法，但是它不能正常显示空白，任何人都可以指导我，我是jquery新手，我将不胜感激任何建议。谢谢
function newdiv()
{
var j,i;
for (i = 0; i <= 5; i++,j=i+1) {
$( '<div id="demo-"'+j+'"' +' > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[i] );
}
}
答案
我希望下面的代码能够解决问题详细说明
- 因此，当dom加载时，我们需要执行该函数，因此我们使用
newdiv（）
] 调用了该函数 - 现在函数将被执行，因此每次i值都会递增，并将新元素添加到html中已经存在的div中。我们通过类名称test选择它。
- 因此它将新元素添加到
test
div
$(document).ready(function() {
function newdiv() {
var j, i;
for (i = 0; i <= 5; i++, j = i + 1) {
var appendElement = `<div id='demo-${i}'>
<span class='value'></span>
</div>
<br>
Loading`;
$('.test').append(appendElement)
}
}
newdiv();
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>
hello
</div>另一答案
试用此代码，它也提供相同的输出。 var i=0;
for (i = 1; i < 11; i++) {
if(i==1)
$("#demo").after('<div id="demo1" > <span class="value"></span> </div><br> Loading');
else{
var div = parseInt(i)-1;
$("#demo"+div).after('<div id="demo'+parseInt(i)+'" > <span class="value"></span> </div><br> Loading');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo" ></div>以上是关于用于div内的循环附加div的主要内容，如果未能解决你的问题，请参考以下文章