選擇所有的孩子，除了那些明顯組與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

回答

相關問題