Question

Ok guys, as promised, here is the real deal, first the sample html:

<li data-foo="bar">
    <span id="a"></span>
    <ul>
        <li>
            <span id="1"></span>
            <ul>
                <li>
                    <span id="b"></span>
                </li>
            </ul>   
        </li>

        <li>
            <span id="2"></span>
            <ul>
                <li>
                    <span id="c"></span>
                </li>
            </ul>   
        </li>

    </ul>

</li>

<li data-foo="bar">
    <span id="d"></span>
    <ul>
        <li>
            <span id="3"></span>
            <ul>
                <li>
                    <span id="e"></span>
                </li>
            </ul>   
        </li>

        <li>
            <span id="4"></span>
            <ul>
                <li>
                    <span id="f"></span>
                </li>
            </ul>   
        </li>

    </ul>

</li>

I want to get the window to pop up “12”, then pop up “34”… so here is my nested functions attempt:

<script>
    var poptext = "";

    $('li[data-foo=bar]').each(

    function () {

        $(this li span).each(function () {
            poptext = poptext + $(this).attr("id");
        }

        alert(poptext);
        poptext = "";

        );

    }

    );
</script>

This does not seem to be working, I think Jquery might got confused with multiple “this” keywords? Also there could be something wrong with the selector for those spans to begin with.

Thanks guys!

Answer 1

I think you are looking for the direct descendant selector: >

Used like this:

$('li[data-foo=bar]').each(function () {
     var poptext = "";        
     $(this).find('> ul > li > span').each(function () {
         poptext = poptext + $(this).attr("id");
     });
     alert(poptext);
});

Will only select the nodes that are direct children of the previous expression on the left hand side.

A more verbose, but maybe readable version could be:

$(this).children('ul').children('li').children('span') // selects the same 

See it in action here: http://jsfiddle.net/xYgJg/