如何定位 $(this) jQuery 中的元素 - Javascript

概述

在 jQuery 中，$(this) 常用于获取当前调用的元素，用作定位元素进行操作。

本文将介绍如何使用 $(this) 定位元素以及如何在不同场景中使用它。

1. 在事件处理程序中使用 $(this)

代码片段：

$("button").click(function(){
  $(this).hide();
});

解释：

上述代码中，通过给 button 元素添加 click 事件处理程序，$(this) 代表当前点击的 button 元素，然后调用了 hide() 方法将元素隐藏。

2. 在 each() 方法中使用 $(this)

代码片段：

$("p").each(function(){
  if($(this).attr("test") == "test"){
    $(this).css("background-color", "yellow");
  }
});

解释：

上述代码中，通过对所有 p 元素调用 each() 方法遍历每个元素，$(this) 代表当前遍历到的 p 元素，然后判断元素的 test 属性是否等于 "test"，如果是则调用 css() 方法给元素添加背景颜色。

3. 在 .on() 方法中使用 $(this)

代码片段：

$("ul").on("click", "li", function(){
  $(this).toggleClass("completed");
});

解释：

上述代码中，通过给 ul 元素添加 click 事件处理程序并利用事件委托机制，$(this) 代表当前点击的 li 元素，然后调用 toggleClass() 方法将元素添加或删除 completed 类。

4. 在 .each() 和 .on() 方法中使用 $(this) 的注意事项

• 在 each() 和 on() 方法中，$(this) 只代表当前遍历或点击到的元素，而不是调用这些方法的元素。例如，假如对一个包含多个 p 元素的 div 元素调用上述代码中的 each() 方法，那么 $(this) 只代表当前遍历到的 p 元素，而不是 div 元素。

• 在 on() 方法中使用 $(this) 时，如果指定了一个选择器作为第二个参数，那么 $(this) 所代表的是与选择器匹配的元素，而不是所有 li 元素。例如，如果改为 $("ul").on("click", "li.completed", function(){}，那么 $(this) 只代表当前点击的已经完成的 li 元素，而不是所有的 li 元素。

结论

$(this) 可以方便地定位调用当前方法的元素，并进行相应的操作。但需要注意的是，在 each() 和 on() 方法中，$(this) 只代表当前遍历或点击到的元素。