태그 이름으로 요소의 자식 요소 길이 가져 오기

Question

목록 아래에있는 목록의 코드에서 길이를 가져 오려고합니다.

$(`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()을 대신 사용하시기 바랍니다. 특별히 첫 번째 수준 인 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>