使用 JQuery 選擇給定父元素的子元素

Question

在面板欄中有許多列表項<li> （假設是父項）。 每個列表項都有不同數量的列表項（子項）。

$(".childItem:nth-child("1");  

此方法將選擇所有父項的所有第一個子項。 如何使用 jQuery 選擇我需要的父項的子項？

Answer 1

您可以使用 .childItem:nth-of-type(x)，其中x是您要選擇的孩子。 MDN

Answer 2

雖然我將展示一個 JQuery 解決方案，但這是一件非常簡單的事情，以至於 JQuery 確實有點矯枉過正。

 $("ul.list:first-of-type > li:first-of-type").addClass("active");

 .active { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> <ul class="list"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> <ul class="list"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> <ul class="list"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>