javascript「this」如何處理來自jquery的多個選擇器返回？

-1

我今天做一個菜單，我無意中發現了這種奇怪的情況下，用下面的HTML：javascript「this」如何處理來自jquery的多個選擇器返回？

<div id="list1"> 
    <ul> 
     <li>1</li> 
     <li>2 - Here is a Submenu 
      <ul> 
       <li>3</li> 
       <li>4</li> 
      </ul> 
     </li> 
    </ul> 
</div>

然後我用下面的JS：

$('#list1 li').click(function(){ 
    $('.list-item').removeClass('list-item'); 
    $(this).addClass('list-item'); 
});

當我這樣做的類將只適用於外部<li>，但我希望它適用於父母和子女LI s。

現在我的問題是，我如何處理這個「返回」，所以我將這些類應用到父母和子女LI s？

js如何處理這些類型的選擇器？事件是否真的運行了兩次，並刪除了最後一個設置的類？

來源

2012-04-09 Jonathan

@amnotiam我只是指出我的思維過程，我刪除了混亂 – Jonathan 2012-04-09 23:07:04

的問題是$('#list1 li')可以選擇li標籤兩個級別內#list並應用單擊處理兩者。此外，您還允許點擊向上傳播，因此您可以通過點擊的方式看到更多的點擊。

如果你只想要外層，那麼你應該使用像這樣的直接子規格。並且，將隔離什麼點擊處理實際安裝：

$("#list > ul > li")

這隻會得到頂級li標籤。而且，整個代碼是這樣的：

$('#list1 > ul > li').click(function(){ 
    $('.list-item').removeClass('list-item'); 
    $(this).addClass('list-item'); 
});

如果要隔離removeClass操作，只是在同級別的其他LI標籤，而不是整個文件，那麼你可以使用這樣的事情：

$('#list1 > ul > li').click(function(){ 
    $(this).addClass('list-item').siblings().removeClass('list-item'); 
});

您的意見讓我有點困惑這個LI標籤你想點擊。如果你真正想要的下級可以點擊，然後應用列表項類的一個被點擊和父李兩人，那麼你可以做的是這樣的：

$('#list1 > ul > li > ul > li').click(function() { 
    $("#list1 .list-item").removeClass('list-item'); 
    $(this).parents("li").add(this).addClass('list-item'); 
    return(false); // stop event propagation 
});

來源

2012-04-09 22:57:07 jfriend00

點來闡述，您的事件冒泡，你可以也停止冒泡，但使用直接的孩子規格更好。 – 2012-04-09 22:59:10

對不起，這是相當不明確的，我想說的是，給定的代碼只能用於頂層，但我希望兩個級別都有類，修復這個 :) – Jonathan 2012-04-09 22:59:33

@jonathan - 現在你已經完全擁有了我困惑。你想要點擊哪個LI標籤？當一旦點擊，哪個LI標記給你想要的列表項類，你想從哪裏刪除？ – jfriend00 2012-04-09 23:02:21

無論jQuery的應用一個元素列表中的一個元素的方法或所有元素都取決於方法。

.click()和.addClass()都將應用於選擇器中的所有jQuery對象。

對於您的情況，點擊處理程序將應用於#list中的所有li元素。 $(this)適用於被點擊的特定li。

但是，你嵌套li元素，這意味着多個點擊處理程序，當你點擊一個內部嵌套li火，無論是嵌套li和它的父li。

爲了防止這種事件傳播通過DOM樹，把stopPropagation（）調用在點擊處理程序：

$('#list1 li').click(function(e){ 
    e.stopPropagation(); 

    $('.list-item').removeClass('list-item'); 
    $(this).addClass('list-item'); 
});

您還return false從您的處理程序，它停止傳播，並防止默認操作即可。這是特定於jQuery的。

來源

2012-04-09 22:57:23

謝謝stopPropagation（），我以前從來沒有用過它，它爲我節省了一大筆頭痛。 – RachelC 2013-01-29 16:22:31

如果添加一個「當前」頁面樣式：

$('#list1 > ul > li').on('click',function(){ 
    $(this).addClass('list-item') //adds class to clicked item 
     .siblings()     //find the others of the same level 
     .removeClass('list-item'); //remove their styles 
});

來源

2012-04-09 22:57:26 Joseph

javascript「this」如何處理來自jquery的多個選擇器返回？

回答

相關問題