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

How javascript "this" handles multiple selector returns from jquery?

本文关键字：jquery 返回 选择器 处理 this 何处理 javascript      更新时间：2023-09-26

我今天正在制作菜单，我偶然发现了这个奇怪的案例，带有以下 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？

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

问题是$('#list1 li')可以在#list内选择两个级别的li标记，并对这两个级别应用点击处理程序。 此外，您允许单击向上传播，因此它可能不仅仅被您单击

的那个看到。

如果您只需要外部级别，则应使用像这样的直接子规范。 这将隔离实际安装的点击处理程序：

$("#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 标签有点困惑。 如果您实际上希望较低级别是可单击的，然后将列表项类应用于单击的级别和父 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
});

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的。

如果要添加"当前"页面样式：

$('#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
});
相关文章：