Question

I have the following html code:

<div id="test">
    <nav>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    </nav>
</div>

I want to add an li to the bottom of the first ul.

I’m sure I have seen somewhere something like $("test:nav:ul"),
but I cant find any help about something similar,
could you guys please help me?

Answer 1

Use this:

$('#test ul:first').append('<li>anything inside li</li>');

or if performance matters, use:

$('#test ul').filter(':first').append('<li>something here</li>');

or you can also use:

$('#test ul').first().append('<li>something here</li');

even you can go backwards:

$('<li>something</li>').appendTo('#test ul:first');