Targeting second span in li element

Question

I have the following markup:

<li>
<span>Hi</span>
<a href="#">Link</a>
<span>Bye</span>
</li>

How can I target the second span? I don't want to access the third child of li, but the second span in li.

Answer 1

You can use jQuery's eq() selector to get the second span in the li element.

$("li span").eq(1)

eq() will return a jQuery object with a reference to the second span. So you can continue calling jQuery methods on it.

If you rather get the HTML element of the second span you could use this instead:

$("li span")[1];