CODEWITHSUNDEEP
jquery
relo80
relo80

Reputation: 285

How to select the last item of a nested unordered list

I want to know and understand how I can select the last item from a list which has nested lists.

Example

<ul id="first">
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>THIS IS WHAT I WANT</li>
  <ul id="second">
    <li>2nd This is another note about it.</li>
  </ul>
</ul>

For this example I want to have "THIS IS WHAT I WANT".

Play around with .last() only return the last (2nd This is another note about it). I also tried this

$( "#first li" ).not('ul#second').last();

but it won't work too

Upvotes: 0

Views: 34

Answers (1)

isherwood
isherwood

Reputation: 61056

Let's say you correct your markup to this:

<ul id="first">
  <li>Look:</li>
  <li>This is some text in a list.</li>
  <li>This is a note about it.</li>
  <li>THIS IS WHAT I WANT</li>
  <li>
    <ul id="second">
      <li>2nd This is another note about it.</li>
    </ul>
  </li>
</ul>

Now you probably want to get the last list item that does not contain another list. You can do this:

$('#first > li:not(:has(ul))').last();

Fiddle demo

https://api.jquery.com/not-selector
https://api.jquery.com/has-selector
https://api.jquery.com/last

Upvotes: 2

Related Questions