Question

今天我正在制作一个菜单，我偶然发现了这个奇怪的案例，其中包含以下HTML：

<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和LI。

现在我的问题是，如何处理这个“返回”，所以我将这些类应用于父和子{{1}}？

js如何处理这些类型的选择器？事件是否真的运行了两次并删除了最后设置的类？

Answer 1

问题是，$('#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标签感到有些困惑。如果您确实希望较低级别可单击，然后将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
});

Answer 2

jQuery是否将方法应用于元素列表中的一个元素或所有元素取决于方法。

.click()和.addClass()都将应用于选择器中的所有jQuery对象。

在您的情况下，点击处理程序将应用于li中的所有#list元素。 $(this)适用于点击的特定li。

但是，您有嵌套的li元素，这意味着当您单击嵌套的li内部嵌套li时，会触发多个点击处理程序它是父li。

要防止此事件通过dom树传播，请在click处理程序中调用stopPropagation（）：

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

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

您也可以从处理程序中return false停止传播并阻止默认操作。这是jQuery特有的。

Answer 3

如果您要添加“当前”页面样式：

$('#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
});

javascript“this”如何处理来自jquery的多个选择器返回？

3 个答案: