Question

我正在使用手风琴 - 手风琴里面有一个列表，里面有一类区域列表我想计算这个列表中有多少列表项，将该数字存储到变量中。我有一个跨度，我想用area-list的计数更新。我必须在多个手风琴上做这个。提前谢谢。

 <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

这应该总结每支手风琴的元素。

$(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>

Answer 2

使用jQuery的children()（docs）。

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

Answer 3

 I figured it out, I needed to write this to be more vague so I could use it on multiple instances of the accordion. Thanks Everyone!

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

  $(".accordion").each(getCounter);

jQuery：计算将该值存储到变量中的列表项数量，并将其作为文本传递到跨度中

3 个答案: