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的on click动作分配给<ul class="browser" data-click="yes">元素中的A元素，但我不希望此行为进一步传播到子元素<ul class="browser">中的A元素。此外，对我来说，为这两个列表保留类.browser非常重要。

我尝试使用：不是以下列方式选择

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

和许多其他变种，但没有成功。因为我正在动态地改变结构，所以使用结构将事件附加到body也很重要。

我在这里发现了这个问题的很多变种，但是它们都没有完全相同，它们对我不起作用。我觉得我误解了：不是以某种方式选择器，但是我仍然无法做到正确。

Answer 1

我知道您只想将点击事件附加到＆＃34;首先＆＃34; <a>的级别，它是＆＃34;浏览器的子级＆＃34;将数据点击设置为＆＃34;是＆＃34;，您只需选择直接子项即可轻松完成此操作：

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

Answer 2

如果我理解得很好，您希望处理a内ul.browser[data-click='yes']元素的点击，而不是内部.browser元素内的点击：

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

Demonstration

Answer 3

这不是最佳方式，但应该有效：

$('ul.browser').each(function()
{
   if($(this).data('click') === 'yes')
   {
       $(this).on('click', function(e)
       {
            //Stuff
       });   
   } 
});

Answer 4

根据我的理解，您希望为<a>内的所有<ul>代码启用点击事件功能，其中.browser具有属性data-click="yes"，并且您希望排除所有其他属于<a>内部<ul>标记的.browser代码。

$(document).ready(function(){

  $("body").on("click", "ul.browser[data-click='yes']  li a:not(.browser .browser *)",function(){
    alert("hi");
  });

});

以上代码解释=＆gt;为<a>标记内的所有<li>标记添加点击功能，其中<ul>标记包含类.browser和属性data-click='yes'，并且不添加点击事件对于任何具有层次结构的标签。浏览器。浏览器

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

4 个答案: