在for循環內使用jQuery.each將數組映射到元素文本？

Question

對於給定的html：

<div id="parent">
    <div class="child">x</div>
    <div class="child">y</div>
    <div class="child">z</div>
</div>

如何從數組映射其子級文本？

這是我的嘗試：

var myArray = ['a', 'b', 'c'];

for (var i = -1; i < myArray.length; i++) {
    $('#parent .child').each(function () {
        $(this).text(myArray[i]);
    });
}

我得到： c,c,c

我如何獲得a,b,c ？

Answer 1

您不需要外部的for循環：

var myArray = ['a', 'b', 'c'];

$('#parent .child').each(function (index) {
    $(this).text(myArray[index]);
});

Answer 2

此處無需使用for循環。

 var myArray = ['a', 'b', 'c']; $('#parent').find('div').each(function(){ $(this).html(myArray[$(this).index()]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div class="child">x</div> <div class="child">y</div> <div class="child">z</div> </div> 

Answer 3

使用.text(function)

 var myArray = ['a', 'b', 'c']; $("#parent > .child").text(function(index) { return myArray[index] }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div id="parent"> <div class="child">x</div> <div class="child">y</div> <div class="child">z</div> </div>