jquery html() выдают только первое значение, используемое с каждым методом()

Question

В следующем коде с помощью jquery each() и html() вставляет только первое значение div, т.е. «David Smith» во всем массиве (all_names [ ]) Я ожидал, что каждый() будет перебирать каждый div и вставить соответствующее значение в соответствующий индекс массива.

Больше, чем коррекция кода, я предпочитаю, если кто-нибудь может сказать мне причину такого поведения каждой функции() или html() (я не уверен). Я новичок в jQuery, и это поможет мне укрепить мое понимание jquery.

Благодаря DKJ

HTML

<div class="test"><a href="#">David Smith</a></div> 
<div class="test"><a href="#">Adam John </a></div> 
<div class="test"><a href="#">Tina Samara </a></div> 
<div class="test"><a href="#">James White </a></div> 

Jquery

<script type="text/javascript"> 
    var all_names = []; 
    var total_names = $('div.test a'); 

    total_names.each(
     function() { 
      all_names[counter] = total_names.html(); 
      counter++; 
     } 
    );  

alert("total Names: " + all_names); 

</script> 

Answer 1

Вы пропускаете точку each. Он выполняет итерацию по массиву, передавая текущему элементу массива функции обратного вызова в качестве второго аргумента (сначала это текущий индекс). Вместо вызова html текущего элемента в цикле вы всегда вызываете его во всем сопоставленном списке.

<script type="text/javascript"> 
    var all_names = []; 
    var total_names = $('div.test a'); 

    total_names.each(
     function(idx, elemInArray) { 
      all_names[counter] = $(elemInArray).html(); 
      counter++; 
     } 
    );  

alert("total Names: " + all_names); 

</script> 

Также стоит отметить, что в итераций каждого, this является ссылкой на текущий элемент. Это может упростить доступ пункты как так

$(someArrayOfElements).each(function() { 
    console.log($(this).html()); // $(this) is the current item wrapped into a jQuery object 
}); 

Answer 2

Используйте второй аргумент каждой функции для достижения предмета

<script type="text/javascript"> 
    var all_names = []; 
    var total_names = $('div.test a'); 

    total_names.each(
     function(index, item) { 
      all_names[counter] = $(item).html(); 
      counter++; 
     } 
    );  

alert("total Names: " + all_names); 

</script> 

Answer 3

Использование .map() вместо .each()

var all_names = total_names.map(function() { 
    return $(this).html(); 
}).get(); 

.get() необходима в конце, чтобы преобразовать коллекция jQuery, которая возвращает .map() в обычный массив.