jQuery从兄弟姐妹中查找属性

在使用 jQuery 进行 DOM 操作时，我们经常需要从一组元素中找到特定属性的元素。本文将介绍如何使用 jQuery 查找兄弟姐妹元素中的属性。

语法

jQuery 提供了 siblings() 方法来获取元素的兄弟姐妹元素，我们可以在其基础上使用筛选器来找到我们需要的元素。语法如下：

$(selector).siblings(filter);

其中，selector 表示要查找的元素的选择器，filter 表示用于筛选元素的选择器。筛选器也可以是一个函数，该函数会对每个元素进行匹配以决定是否保留。

示例

假设我们有以下 HTML 结构：

<ul>
  <li class="apple" data-color="red">苹果</li>
  <li class="banana" data-color="yellow">香蕉</li>
  <li class="orange" data-color="orange">橙子</li>
  <li class="apple" data-color="green">青苹果</li>
</ul>

我们想要获取所有 class 为 "apple" 的元素中， data-color 属性值为 "red" 的元素。我们可以使用以下代码来实现：

$("li.apple").siblings("[data-color='red']");

这将返回一个包含一个元素的 jQuery 对象，它代表第一个符合条件的元素。

总结

使用 siblings() 方法结合筛选器可以方便地从兄弟姐妹元素中查找属性。需要注意的是，筛选器也可以是一个函数，它会对每个元素进行匹配以决定是否保留。