jQuery 当前 jQuery 对象下查找

在使用 jQuery 进行前端开发时，我们经常需要在当前 jQuery 对象下查找特定的元素或者执行特定的操作。jQuery 提供了一系列的方法来帮助我们进行这些操作。本文将介绍一些常用的方法，并通过代码示例来演示它们的用法。

1. 子元素查找

要查找当前 jQuery 对象下的子元素，我们可以使用 children() 方法。该方法返回当前对象的所有直接子元素。

// HTML
<ul id="parent">
  <li>子元素1</li>
  <li>子元素2</li>
  <li>子元素3</li>
</ul>

// JavaScript
const $parent = $('#parent');
const $children = $parent.children();

// 遍历输出子元素的内容
$children.each(function() {
  console.log($(this).text());
});

上述代码将输出以下内容：

子元素1
子元素2
子元素3

2. 后代元素查找

如果我们希望查找当前 jQuery 对象下的所有后代元素，可以使用 find() 方法。该方法返回当前对象下所有匹配选择器的后代元素。

// HTML
<div class="parent">
  <div class="child">
    <span>后代元素1</span>
  </div>
  <div class="child">
    <span>后代元素2</span>
  </div>
  <div class="child">
    <span>后代元素3</span>
  </div>
</div>

// JavaScript
const $parent = $('.parent');
const $descendants = $parent.find('span');

// 遍历输出后代元素的内容
$descendants.each(function() {
  console.log($(this).text());
});

上述代码将输出以下内容：

后代元素1
后代元素2
后代元素3

3. 相邻元素查找

我们还可以使用 next() 方法来查找当前 jQuery 对象下的相邻元素。该方法返回下一个相邻元素。

// HTML
<div class="sibling">相邻元素1</div>
<div class="sibling">相邻元素2</div>
<div class="sibling">相邻元素3</div>

// JavaScript
const $firstSibling = $('.sibling:eq(0)');
const $nextSibling = $firstSibling.next();

console.log($nextSibling.text());

上述代码将输出以下内容：

相邻元素2

4. 上一个相邻元素查找

如果我们需要查找当前 jQuery 对象的上一个相邻元素，可以使用 prev() 方法。

// HTML
<div class="sibling">相邻元素1</div>
<div class="sibling">相邻元素2</div>
<div class="sibling">相邻元素3</div>

// JavaScript
const $lastSibling = $('.sibling:eq(2)');
const $prevSibling = $lastSibling.prev();

console.log($prevSibling.text());

上述代码将输出以下内容：

相邻元素2

5. 父元素查找

要查找当前 jQuery 对象的父元素，可以使用 parent() 方法。

// HTML
<div class="parent">
  <div class="child">子元素</div>
</div>

// JavaScript
const $child = $('.child');
const $parent = $child.parent();

console.log($parent.attr('class'));

上述代码将输出以下内容：

parent

6. 过滤元素

我们经常需要根据特定的条件过滤元素。jQuery 提供了一系列的过滤方法，如 filter()、first()、last() 等。

下面是一个使用 filter() 方法来过滤元素的示例：

// HTML
<ul>
  <li>元素1</li>
  <li class="selected">元素2</li>
  <li>元素3</li>
</ul>

// JavaScript
const $listItems = $('li');

const $selectedItems = $listItems.filter('.selected');
console.log($selectedItems.text());

上述代码将输出以下内容：

元素2

总结

本文介绍了几种常见的在当前 jQuery 对象下查找元素的方法，包括子元素查找、后代元素查找、相邻元素查找