1

好吧,伙计们,正如所承诺的,这是真正的交易,首先是示例 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>

我想让窗口弹出“12”,然后弹出“34” ......所以这是我的嵌套函数尝试:

<script>
    var poptext = "";

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

    function () {

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

        alert(poptext);
        poptext = "";

        );

    }

    );
</script>

这似乎不起作用,我认为 Jquery 可能会与多个“this”关键字混淆?开始时这些跨度的选择器也可能有问题。

多谢你们!

4

2 回答 2

1

您的代码中有语法错误,也$(this li span)应该是$('li span', this)您的逻辑关闭,您没有过滤掉带有字母 id 的跨度。

于 2012-08-09T19:50:26.803 回答
1

我认为您正在寻找直接后代选择器:>

像这样使用:

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

只会选择左侧前一个表达式的直接子节点。

一个更冗长但可读的版本可能是:

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

在此处查看实际操作:http: //jsfiddle.net/xYgJg/

于 2012-08-09T19:55:54.803 回答