如何获取$(this)选择器的子元素？

在前端开发中，经常需要通过选择器来操作DOM元素。而$(this)是jQuery中一个非常常用的选择器，表示当前正在被操作的元素。

如果想要获取$(this)选择器的子元素，可以通过以下几种方法实现：

方法一：使用find()方法

jQuery提供了find()方法，可以查找匹配选择器的所有子元素。可以通过以下代码获取$(this)选择器的子元素：

$(this).find('selector');

其中，selector为想要查找的子元素的选择器。例如，如果想要获取$(this)元素下所有class为child的元素，可以这样写：

$(this).find('.child');

方法二：使用children()方法

jQuery提供了children()方法，可以查找直接子元素。可以通过以下代码获取$(this)选择器的子元素：

$(this).children('selector');

其中，selector为想要查找的子元素的选择器。例如，如果想要获取$(this)元素下所有class为child的直接子元素，可以这样写：

$(this).children('.child');

方法三：使用siblings()方法

如果想要获取$(this)选择器的兄弟元素，则可以使用siblings()方法。该方法可以查找与当前元素同级别的所有元素。可以通过以下代码获取$(this)选择器的兄弟元素：

$(this).siblings('selector');

其中，selector为想要查找的兄弟元素的选择器。例如，如果想要获取$(this)元素的所有class为sibling的兄弟元素，可以这样写：

$(this).siblings('.sibling');

示例代码

假设有如下HTML结构：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="sibling">Sibling 1</div>
  <div class="sibling">Sibling 2</div>
</div>

若想要在点击child元素时，获取其所有兄弟元素和子元素，则可以使用以下代码实现：

$('.child').click(function() {
  var $this = $(this);
  var siblings = $this.siblings();
  var children = $this.children();

  console.log(siblings);
  console.log(children);
});

上述代码中，$this代表当前被点击的child元素，siblings变量包含了所有与该元素同级别的元素，children变量包含了该元素的所有直接子元素。

结论

本文介绍了三种方法来获取$(this)选择器的子元素和兄弟元素，分别是find()、children()和siblings()方法。通过掌握这些方法，可以更加灵活地操作DOM元素，为前端开发提供更多便利。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/7195