当涉及到“this”选择器时，jQuery 的层次结构是如何工作的？

Posted 2023-03-05

【中文标题】当涉及到“this”选择器时，jQuery 的层次结构是如何工作的？

【英文标题】：How does jQuery's hierarchy work when it comes to the "this" selector?

【发布时间】：2011-12-05 00:27:18

【问题描述】：

例如，如果我要使用这段代码：

$(".Class").children(:last).click(function()
    $(this).siblings(":not(:last)").toggle();

“this”是指“.Class”类，还是指指定“.Class”类的最后一个子类？

【问题讨论】：

'this' 指的是最后一个孩子。

【参考方案1】：

this 将引用在触发事件的链中的最终选择器中匹配结果的 DOM 元素；在这种情况下，.Class 的 :last 子级。因此，如果您单击最后一个 .Class 类的 last 子级，则会触发该事件。在这个fiddle 中查看如何只有foo2 触发警报。

<div class="Class">
    <div> </div>
    <div> </div>
    <div> </div>
   <div> </div> <!--This is the last child of .Class-->

</div>

除了，它不会像你发布的那样工作，因为:last 应该作为字符串用引号括起来。

【讨论】：

感谢您的回答！我不会记得我需要引号。

【参考方案2】：

它指的是被点击的元素。也就是说，在绑定事件侦听器时，元素中的最后一个元素的类为Class。如果在事件侦听器已经绑定之后，在同一个父级中的前一个最后一个元素之后添加另一个元素，它仍然会侦听 previously 最后一个，this 也将是上一个最后一个。

【讨论】：

感谢您的回答，不过您的回答很混乱。

嗯？这听起来不正确。 children() 函数会将其过滤到 .Class 的子元素，而不是 .Class 本身。

@yahelc：你是对的。我想我没有仔细阅读。

【参考方案3】：

我认为在这种情况下它是最后一个孩子。它总是在点击词之前匹配的最后一个元素。

【参考方案4】：

它指的是您正在操作的当前上下文。在您提供的示例中，它指的是指定“类”类的最后一个子项。

如果您要执行以下操作：

$(".Class").children().each(function()
    ...
);

$(this) 会在每个孩子被迭代时引用它。