jquery select the first lis of each ul

Question

I need to select the first lis of each ul in this structure:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

I have this selector: container.find('div > ul > li:first') but jquery engine parese first div > ul > li and then takes the forst result according to :first . But I want the first li of each ul, something like: div > ul > (li:first) .

How can I solve this?

Answer 1

You want the :first-child selector:

Description: Selects all elements that are the first child of their parent.

While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

ref: http://api.jquery.com/first-child-selector/

Example:

container.find('div ul > li:first-child');

Or if you have multiple levels of ul containing li 's:

container.find('div > ul > li:first-child');

Answer 2

You're looking for jQuery's each() function:

http://api.jquery.com/each/

$("#yourdiv ul").each(function(){
    $(this).find("li:first");
});

Answer 3

Use "first-child" selector on li element

$("ul li:first-child")

Answer 4

$("#mydiv ul").each(function(){
 $('li:eq(0)',this);
});