Using JQuery select child element of the given parent element

Question

In a panelbar there are many list items <li> (let's say parent items). Every list item has different number of list items (child items).

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

This method will select all the first child items of all the parent items. How can I select with jQuery the child item of the parent item I need?

Answer 1

You can use .childItem:nth-of-type(x), where x are the child you want select. MDN

Answer 2

While I will show a JQuery solution, this is such a simple thing that JQuery really is overkill.

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