jQuery selector to get last child that doesnt have a class
I have a page of nested UL
s and LI
s, 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
, wher开发者_JS百科e 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?
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.
Filter out the elements with a class.
$('li:not(.x):last-child')
If the classes are different amongst the li elements, that is if all the elements are not class="x"
then something like
$('li[class=""]:last-child')
精彩评论