jquery html() 仅给出每个 () 方法使用的第一个值

Question

在下面的代码中，使用 jquery 的 each() 和 html() 仅插入整个数组中的第一个 div 值，即 "David Smith" ( all_names[]) 我期望 each() 遍历每个 div 并将它们的相应值插入相应的数组索引。

除了代码更正之外，我更希望有人能告诉我 each() 或 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() 将 .map() returns 的 jQuery 集合转换为普通数组。

jquery html() 仅给出每个 () 方法使用的第一个值

jquery html() give out only first value used with each () method

javascript

each

jquery