选择所有的孩子，除了那些明显组与jQuery

我有一个表结构像这样（注意与.browser类，并与其中一人两个表数据点击=“是”）选择所有的孩子，除了那些明显组与jQuery

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

我试图使用方法：以下列方式

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

等诸多变种没有选择器，但没有成功。由于我正在动态地改变结构，因此使用该结构将事件附加到主体对我也很重要。

我在这里发现了这个问题的很多变种，但是没有一个是完全相同的，他们没有为我工作。我觉得我误解了：不是以某种方式选择，但是我仍然无法做到。

来源

2014-07-16 LNovak

如果我没有理解好了，你要处理的内部ul.browser[data-click='yes']a元素的点击而不是内部.browser的元素：

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

Demonstration

来源

2014-07-16 08:54:46

谢谢，这就是它。我将不得不更深入地了解以下行为：not operator – LNovak

这不是最佳的方式，但应该工作：

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

来源

2014-07-16 08:56:22 Piwwoli

我明白你只想将click事件附加到“第一个浏览器”的<a>这是一个儿童的水平‘’用数据点击设置为‘是’，你可以很容易地做到这一点的唯一选择直接孩子的：我的理解

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

来源

2014-07-16 08:57:56 rrr

谢谢你的回答，我正在考虑这个选项，但是我希望规则在更深层次上也可以工作 – LNovak

这也适用于更深层次，更多优化，选择直接孩子使得节点选择更加优化。 – rrr

，要启用点击事件功能<a><ul>中的标签具有类别.browser属性data-click="yes"并且您想要排除内部带有类别.browser的<ul>标签的所有其他<a>标签。

$(document).ready(function(){ 

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

});

上面的代码解释=>点击添加功能自带内部<li>标签，其父母为上课.browser<ul>标签和属性data-click='yes'并没有为任何有层次的标签添加点击事件所有<a>标签.browser .browser

来源

2014-07-16 09:25:34 Silz

选择所有的孩子，除了那些明显组与jQuery

回答

相关问题