如何选择嵌套了两个 .each(） 函数的多个元素

How to select multiple elements with two .each() functions nested?

本文关键字：两个 each 函数 元素 何选择 选择 嵌套      更新时间：2023-09-26

好的伙计们，正如承诺的那样，这是真正的交易，首先是示例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"关键字混淆？此外，这些跨度的选择器一开始也可能存在问题。

谢谢大家！

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

像这样使用：

$('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/

你的代码中有语法错误，$(this li span)应该$('li span', this)你的逻辑也关闭了，你没有过滤掉带有字母 id 的范围。

相关文章：