jquery获取挨着的元素

在编写代码的时候，我们常常会遇到需要获取相邻元素的情况，在一个列表中，我们可能想要获取当前列表项的下一个或上一个元素，在jQuery中，这可以通过使用一些特定的选择器来实现，这篇文章就来详细聊聊如何用jQuery来获取相邻的元素。

相邻元素的选择器

在jQuery中，获取相邻元素主要依赖于两个选择器：next() 和prev()，这两个方法分别用于获取当前元素的下一个和上一个兄弟元素。

.next()：选择当前元素的下一个同级元素。

.prev()：选择当前元素的上一个同级元素。

使用 `.next()` 获取下一个元素

假设我们有一个简单的HTML列表，我们想要获取每个列表项的下一个元素：

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

使用jQuery，我们可以这样获取每个列表项的下一个元素：

$('li').each(function() {
  var nextElement = $(this).next();
  console.log(nextElement.text());
});

这段代码会遍历所有的<li>元素，并打印出每个元素的下一个元素的文本内容，对于第一个<li>，.next()会返回项目2，对于第二个<li>，它会返回项目3，而对于最后一个<li>，由于没有下一个元素，.next()将返回undefined。

使用 `.prev()` 获取上一个元素

同样的，如果我们想要获取每个列表项的上一个元素，可以使用.prev()：

$('li').each(function() {
  var prevElement = $(this).prev();
  console.log(prevElement.text());
});

这段代码会从列表的第一个<li>开始，打印出每个元素的上一个元素的文本内容，对于第一个<li>，由于它是第一个元素，.prev()将返回undefined，对于第二个<li>，它会返回项目1，依此类推。

处理 `undefined` 情况

由于.next()和.prev()在到达列表的开头或结尾时会返回undefined，我们可能需要在代码中添加一些逻辑来处理这种情况：

$('li').each(function(index) {
  var nextElement = $(this).next();
  var prevElement = $(this).prev();
  
  if (nextElement.length) {
    console.log('下一个元素:', nextElement.text());
  } else {
    console.log('没有下一个元素');
  }
  
  if (prevElement.length) {
    console.log('上一个元素:', prevElement.text());
  } else {
    console.log('没有上一个元素');
  }
});

在这个例子中，我们使用了.length属性来检查.next()和.prev()的返回值是否为undefined，如果返回值是一个有效的jQuery对象，.length将返回非零值，否则返回0。

获取多个相邻元素

我们可能需要获取当前元素的多个相邻元素，jQuery提供了.nextAll()和.prevAll()方法来实现这一点：

.nextAll()：选择当前元素之后的所有同级元素。

.prevAll()：选择当前元素之前的所有同级元素。

如果我们想要获取每个<li>元素之后的所有元素：

$('li').each(function() {
  var allNextElements = $(this).nextAll();
  console.log('后续所有元素:', allNextElements.map(function() {
    return $(this).text();
  }));
});

这段代码会打印出每个<li>元素之后所有元素的文本内容。

通过使用jQuery的选择器，我们可以方便地获取任何元素的相邻元素，无论是获取下一个或上一个元素，还是获取一系列相邻元素，jQuery都提供了简单而强大的方法来实现这些功能，这些技巧，可以让你在处理DOM元素时更加得心应手。