タグ名で要素の子要素の長さを取得

Question

私はリストの下のリストである自分のコードでliの長さを取得しようとしています。

$(`ul.topnav > li`).each(function() { 
 
    console.log($(this).children("ul li").length); 
 
});

body { 
 
    font-size: 14px; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<ul class="topnav"> 
 
    <li>Item 1 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
     <li class="topnav1">Nested item 2</li> 
 
    </ul> 
 
    </li> 
 
    <li>Item 2 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
     <li class="topnav1">Nested item 2</li> 
 
     <li class="topnav1">Nested item 3</li> 
 
    </ul> 
 
    </li> 
 
    <li>Item 3 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
    </ul> 
 
    </li> 
 
</ul>

しかし、長さはすべての要素に0を印刷しているようです。私はこれを行う場合 しかし：

$(`ul.topnav > li`).each(function() { 
    console.log($(this).children().children().length); 
}); 

を、それは正しい、すなわち2,3,1を印刷しています。

しかし、タグ名でn番目の子に到達することはできますか？私は何が欠けているのですか？

Answer 1

children()は、ul liセレクタに一致する子要素を探しているため問題があります。彼らはulの要素しかないので、これは不可能です。

これを修正するには、代わりにfind()を使用することをおすすめします。具体的には、第1レベルのli要素のみを使用する場合は、> ul > liをセレクタとして使用できます。

$(`ul.topnav > li`).each(function() { 
 
    console.log($(this).find("ul li").length); 
 
});

body { 
 
    font-size: 14px; 
 
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<ul class="topnav"> 
 
    <li>Item 1 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
     <li class="topnav1">Nested item 2</li> 
 
    </ul> 
 
    </li> 
 
    <li>Item 2 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
     <li class="topnav1">Nested item 2</li> 
 
     <li class="topnav1">Nested item 3</li> 
 
    </ul> 
 
    </li> 
 
    <li>Item 3 
 
    <ul> 
 
     <li class="topnav1">Nested item 1</li> 
 
    </ul> 
 
    </li> 
 
</ul>