How do I select all of the elements in a list that have children, using jQuery?

Question

I have an arbitrarily deep list, like so:

<ul>
<li></li>
<li>
  <ul>
    <li></li>
    <li>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </li>
  </ul>
</li>

Using jQuery, how can I select every li in the list that is not a leaf node. In other words, I want to select all of the li elements that have children ULs.

Thanks for your help!

Answer 1

jQuery('li:has(ul)');

More info about :has.

Answer 2

Here's another alternative:

$('li ul').closest('li')

This is likely to be a fair bit faster than :has on modern browsers, since it'll use the native querySelectorAll method on the main selector. :has can't use native support since it's not a standard CSS selector but a jQuery extension.