javascript - jQuery:计算有多少列表项将该值存储到变量中并将其作为文本传递到范围中

Question

我正在使用 Accordion - 我在 Accordion 内有一个列表，其中包含一类区域列表我想计算此列表中存在多少列表项，将该数字存储到变量中。我有一个跨度，我想用区域列表的计数来更新。我必须在多个 Accordion 上执行此操作。提前致谢。

 <ul class="accordion" data-accordion data-allow-all-closed="true">
        <li class="accordion-item" data-accordion-item>
        <a href="#" class="accordion-title">Accounting (<span class="counter">1000</span>)</a>
        <div class="accordion-content" data-tab-content>

    <ul class="no-bullet area-list">
      <li><a class="naming" href="#">Benny Goodman</a></li>
      <li><a class="naming" href="#">Benny Goodman</a></li>
      <li><a class="naming" href="#">Benny Goodman</a></li>
    </ul>

        </div>
    </li>
</ul>


<ul class="accordion" data-accordion data-allow-all-closed="true">
        <li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accounting 2 (<span 
    class="counter">1000</span>)</a>    
<div class="accordion-content" data-tab-content>

      <ul class="no-bullet area-list">
               <li><a class="naming" href="#">Benny Goodman</a></li>
          <li><a class="naming" href="#">Benny Goodman</a></li>
          <li><a class="naming" href="#">Benny Goodman</a></li>
          <li><a class="naming" href="#">Benny Goodman</a></li>
      <li><a class="naming" href="#">Benny Goodman</a></li>
      <li><a class="naming" href="#">Benny Goodman</a></li>
    </ul>

        </div>
    </li>
</ul>

<script>

function getCounter(){
var count = $("#myList li").length;
$("span.counter").text(count);

}

getCounter();

</script>

Answer 1

这应该总结每个 Accordion 的元素。

$(function() {
  $(".accordion").each(function() {
    var count = $(this).find(".area-list").children("li").length;
    $(this).find(".counter").text(count);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#">Accounting (<span class="counter">1000</span>)</a>
    <div class="accordion-content" data-tab-content="">
      <ul class="no-bullet area-list">
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
      </ul>
    </div>
  </li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
  <li class="accordion-item" data-accordion-item="">
    <a class="accordion-title" href="#">Accounting 2 (<span class="counter">1000</span>)</a>
    <div class="accordion-content" data-tab-content="">
      <ul class="no-bullet area-list">
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
        <li>
          <a class="naming" href="#">Benny Goodman</a>
        </li>
      </ul>
    </div>
  </li>
</ul>