Question

I have a nested list like this:

<ul class="list">

    <li class="list_item_type_1">
        <ul class="list">
            <li class="list_item_type_2">Unnested item</li>
        </ul>
    </li>

    <li class="list_item_type_2">Unnested item</li>

</ul>

With jQuery I want to add a list item before all .list_item_type_2 in the first .list.

I write it like this:

$('.list:first').find('li.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');

This won’t work as intended because the script finds the first .list_item_type_2 in the second .list and appends the new code there instead.

How can I keep the search in the first ul and prevent it from entering underlying ul elements?

Cheers!

Answer 1

Maybe try to combine the selector in one expression ?

$('.list:first > LI.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');

The > selector does only match the direct children, as explained in the doc.