jQuery：変数にその値を格納するリスト項目の数を数え、範囲としてテキストとして渡します

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

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); 

Answer 2

jQueryのchildren()（docs）を使用してください。

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

Answer 3

これは、各アコーディオンの要素をまとめる必要があります。

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