Question

我有以下html div

<div id="sentencesDiv">
</div>

我有以下jquery代码：

mydiv =jQuery('<div/>', {
                id : key,
                text: sentences[key], // key of sentence BDM4 is here 
            }).appendTo('#sentencesDiv');

    $('#sentencesDiv').each(function(index,value){
                        jQuery('<input/>', {
                            class : "ch",
                            type : "checkbox"
                        }).appendTo(mydiv);

                        jQuery('<img/>', {
                            class : "correctWrong",
                            alt : 'image',
                            width : '42px',
                            height :'42px',
                            id : 'img'+index
                        }).appendTo(mydiv);

            });

当我尝试添加id：

时

'img'+index

它总是添加＆＃39; img0＆＃39;作为id 。我不明白是什么问题

我想要一个像这样的输出

<div id="sentencesDiv">

<div id="somekey1">
<input type="checkbox" />
<img class="correctWrong" alt="image" style="width: 42px; height: 42px;" id="img0">
</div>

<div id="somekey2">
<input type="checkbox" />
<img class="correctWrong" alt="image" style="width: 42px; height: 42px;" id="img1">
</div>

<div id="somekey3">
<input type="checkbox" />
<img class="correctWrong" alt="image" style="width: 42px; height: 42px;" id="img2">
</div>

......
</div>

我也很困惑何时使用

$('#sentencesDiv').each(function(index,value){});

和

$('#sentencesDiv div').each(function(index,value){});

Answer 1

选择器的.each()操作（例如“#sentencesDiv”）最多只运行一次内部函数，这就是index始终为零的原因。

您可以将代码完全移出.each()，然后让图片ID取决于key变量，而不是index。

var mydiv =jQuery('<div/>', {
    id : key,
    text: sentences[key], // key of sentence BDM4 is here 
})

jQuery('<input/>', {
    class : "ch",
    type : "checkbox"
}).appendTo(mydiv);

jQuery('<img/>', {
    class : "correctWrong",
    alt : 'image',
    width : '42px',
    height :'42px',
    id : 'img' + key
}).appendTo(mydiv);

mydiv.appendTo('#sentencesDiv');

Answer 2

多次使用的元素都在其上使用

所以用它来达到你的要求

  $('#sentencesDiv div').each(function(index,value){
                    jQuery('<input/>', {
                        class : "ch",
                        type : "checkbox"
                    }).appendTo(mydiv);

                    jQuery('<img/>', {
                        class : "correctWrong",
                        alt : 'image',
                        width : '42px',
                        height :'42px',
                        id : 'img'+index
                    }).appendTo(mydiv);
        });

因为您希望在<div>元素#sentencesDiv元素

中添加代码

Answer 3

您需要使用

// for all direct child elements of #sentencesDiv 
$('#sentencesDiv > div').each(function(index,value){
     // your code goes here
});

Jquery每个选择器索引都不会递增

3 个答案: