將數組映射到元素文本中使用jQuery.each裏面的for循環？

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>