Search code examples
jquery-selectors

jQuery selector to get last child that doesnt have a class

I have a page of nested ULs and LIs, I need to get the last LI of each UL, so I'm doing:

$('li:last-child')

this works great.

But I need to extend this so it gets the last child LI of each UL, where the LI doesn't have a given class (x). For example:

<ul>
    <li class="x">1</li>
    <li>2</li>
    <li class="x">3</li>
    <li>4</li>
    <li>5</li>
    <li class="x">
        6
        <ul>
            <li class="x">7</li>
            <li>8</li>
            <li class="x">9</li>
            <li>10</li>
            <li>11</li>
            <li class="x">12</li>
            <li class="x">13</li>
        </ul>
    </li>
</ul>

I need to return LI 5 and 11 (as these are the last children within their parent ul that don't have .x)

How can I do this elegantly?

Solution

  • Use the map()(docs) method to create a jQuery object by iterating over the <ul> elements, and returning the last child <li> element without an x class.

    Example: http://jsfiddle.net/e2Da7/2/

    var lastLisNoX = $('ul').map(function() {
    return $(this).children('li:not(.x)').get(-1);
});

    EDIT: Updated my jsFiddle example with the HTML that was posted in the question.