对于循环，在div中追加div

Question

嗨，我想问一下我代码中当前的循环，我正在手动执行它的手动工作

$( '<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] );         

但我正在尝试执行它的buy函数，直到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] );         
}
}

Answer 1

我希望下面的代码能解决问题

详细说明

1. 因此，当加载dom时，我们需要执行该函数，因此我们使用newdiv((调用该函数

2. 现在函数被执行了，所以每次i值都会增加，它会将新元素添加到html中的div中。我们通过类名来选择它，这个类名就是test。

3. 因此，它将向测试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>

Answer 2

试用这个代码，它也给出了相同的输出。

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>