отображать массив в текст элементов, используя 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>