javascript - 使用 jQuery 选择除标记组中的所有子项之外的所有子项

Question

我有一个这样的列表结构(注意两个列表带有 .browser 类，其中一个带有 data-click="yes")

<ul class="browser" data-click="yes">
<li><a href="#">Group 1</a>
    <ul>
        <li><a href="#">Item_1</a></li>
        <li><a href="#">Item_2</a></li>
        <li><a href="#">Item_3</a></li>
    </ul>
</li>
<li><a href="#">Group_2</a>
    <ul>
        <li><a href="#">Item_4</a></li>
        <li><a href="#">Item_5</a></li>
        <li><a href="#">Item_6</a></li>
        <li><a href="#">Group_3</a>
            <ul class="browser">
                <li><a href="#">Item_1</a></li>
                <li><a href="#">Item_2</a></li>
                <li><a href="#">Group_4</a>
                    <ul>
                        <li><a href="#">Item_1</a></li>
                        <li><a href="#">Item_2</a></li>
                        <li><a href="#">Item_3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item_3</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

我想使用 jQuery 将点击操作分配给 <ul class="browser" data-click="yes"> 中的 A 元素。元素，但是我不希望此行为进一步传播到子元素中的 A 元素 <ul class="browser"> .此外，对我来说，为这两个列表保留类 .browser 很重要。

我尝试通过以下方式使用 :not 选择器

$("body").on("click", "UL.browser[data-click='yes'] :not(.browser) A", function (event) {
// do something
});

和许多其他变体，但没有成功。由于我正在动态更改结构，因此使用将事件附加到正文的结构对我来说也很重要。

我在这里发现了这个问题的许多变体，但没有一个是完全相同的，它们对我不起作用。我感觉到我在某种程度上误解了 :not 选择器，但我仍然无法正确理解它。

Answer 1

我知道您只想将点击事件附加到 <a> 的“第一”级它们是数据点击设置为"is"的“浏览器”的 child ，您只需选择直接 child 即可轻松做到这一点:

$("body").on("click", "ul.browser[data-click='yes'] > li > a", function (event) {
    // Do something
});