📜  选择一个特定的兄弟 jquey - Javascript (1)

📅  最后修改于: 2023-12-03 15:12:21.550000             🧑  作者: Mango

选择一个特定的兄弟 jQuery

在 jQuery 中,使用 .siblings() 方法来获取所有兄弟元素,使用 .next() 方法来获取下一个兄弟元素,使用 .prev() 方法来获取上一个兄弟元素。

如果我们想要选择一个特定的兄弟元素,可以使用 .siblings() 方法来获取所有兄弟元素,然后使用过滤器(filter)来筛选出我们需要选择的兄弟元素。

下面是一个例子:

<ul>
  <li class="selected">List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

我们想要选择当前被选中的 li 元素的下一个兄弟元素,可以使用以下代码:

var nextSibling = $('li.selected').next();

我们也可以使用 .prev() 方法来获取上一个兄弟元素:

var previousSibling = $('li.selected').prev();

注意,如果没有找到下一个或上一个兄弟元素,则 .next().prev() 会返回一个空对象。

我们还可以使用过滤器(filter)来选择特定的兄弟元素,例如,如果我们想要选择当前被选中的 li 元素后面的第二个元素,可以使用以下代码:

var secondNextSibling = $('li.selected').nextAll().filter(':eq(1)');

上面的代码中,.nextAll() 方法会获取当前 li 元素后面的所有兄弟元素,然后我们使用 .filter() 方法来筛选出第二个元素(索引为 1)。

总结一下,获取特定的兄弟元素可以使用以下几个 jQuery 方法:

  • .siblings():获取所有兄弟元素。
  • .next():获取下一个兄弟元素。
  • .prev():获取上一个兄弟元素。
  • .nextAll():获取当前元素后面的所有兄弟元素。
  • .prevAll():获取当前元素前面的所有兄弟元素。

其中,.next().prev() 方法只会返回一个兄弟元素,其他方法会返回多个兄弟元素。

参考文献: