Question

I am looping through some elements and need to determine if an element has a child(grandchild?) with the li tag, like in the information element below. The li elements will vary in id so I am not referencing them that way. I am currently looping through the li elements and if I check for children it always returns true because there are “a” tag children, I just want to check for ‘lil’ tag children.

            <ul id="navMenu">
                <li id="home"><a href="#home" rel="ajax">Home</a></li>
                <li id="information"><a href="#information" rel="ajax">Information</a>
                    <ul>
                       <li><a href="#credits" rel="ajax">Credits</a></li>
                       <li><a href="#lorem_ipsum" rel="ajax">Lorem Ipsum</a></li>
                    </ul>
                </li>
                <li id="contact"><a href="#contact" rel="ajax">Contact</a></li>
            </ul>

Here is what I have now…

        $('#test').load('../common.html #navMenu', function() {
            $.each($("#test #navMenu li"), function(i,v) {
                var theElement = $(v);
                if ($(theElement).children('li')){
                    alert('This Element has children');
                }
            });
        });

Thank you once again,
Todd

Answer 1

$(theElement).children('li') returns a jQuery object which always passes an if clause, even when it’s empty.

Moreover, you want .find, since .children only returns direct children and not grandchildren.

So:

if ($(theElement).find('li').length > 0) {

or:

if ($(theElement).find('li').length) {
// 0 won't pass an if clause, and all other numbers will, so you can eliminate `> 0`