Question

我有一个对元素列表进行计数的代码：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

window.onload = function() {
    var length = $('ul#list_1').children('li').length;
    $(".disp_1").html(length);

    var length = $('ul#list_2').children('li').length;
    $(".disp_2").html(length);
}

</script>

(number of elements: <span class="disp_1"></span>)
<ul id="list_1">
    <li>element
    <li>element
</ul>

(number of elements: <span class="disp_2"></span>)
<ul id="list_2">
    <li>element
    <li>element
    <li>element
</ul>

我的问题是我该如何推广N号列表的jQuery代码？

Answer 1

这是jQuery each函数的理想情况：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

window.onload = function() {
  $('div.count-this').each((i, div) => {
    var $div = $(div);
    var length = $div.find('li').length;
    $div.children('disp').html(length);
  });
}

</script>

<div class="count-this">
  (number of elements: <span class="disp"></span>)
  <ul>
    <li>element</li>
    <li>element</li>
  </ul>
<div>

<div class="count-this">
  (number of elements: <span class="disp"></span>)
  <ul>
    <li>element</li>
    <li>element</li>
    <li>element</li>
  </ul>
<div>

...

或者，您可以使用匿名函数，这可能是jQuery惯用的语法：

  $('div.count=this').each(function() {
    var $div = $(this);
    var length = $div.children('li').length;
    $div.children('disp').html(length);
  });

注意：传递给each的函数的第二个参数是DOM元素，而不是JQuery对象，因此您需要将其包装起来以使用jQuery方法。这样的事情会导致错误：

  $('div.count-this').each((i, div) => {
    var length = div.find('li').length;
    div.children('disp').html(length);
  });

因为div是Element，而不是JQuery对象。

如何归纳计算元素列表的代码？

1 个答案: