jquery :empty but ignoring text nodes

Question

say my markup is:

<ul>
    <li id="num1">hello</li>
    <li id="num2"><p>hello</p></li>
    <li id="num3">sdf dfg</li>
    <li id="num4"></li>
    <li id="num5"><a>linky</a></li>
</ul>

how do I query the ul to return #num1, #num3 and #num4 (the ones with no child tags)?

something like:

$('ul').children('li:empty')

however from the docs:

:empty  Returns: Array<Element(s)>
Matches all elements that have no children (including text nodes).

because it includes text, the above query is only returning me #num4.

What should/can I do instead?

Edit: I'm also using jQuery 1.1.4 (don't ask)

Thanks

Answer 1

You can try this:

$('ul').children().filter(function()
{
    return $(this).children().length != 0;
});

Basically, the function checks if the number of immediate children is zero. It might not be the most elegant solution but at least it will work.

Answer 2

How to get elements which have no children, but may have text?