通过数据属性值查找元素的jQuery方法

Question

我有几个类似下面的元素：

<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

如何向具有 data-slide 属性值为 0 的元素添加类？

我尝试了许多不同的解决方案，但没有任何作用。例如：

$('.slide-link').find('[data-slide="0"]').addClass('active');

有什么想法吗？

- MrUpsidown

---

在这里稍微解释一下，为什么这个不起作用是因为您试图查找具有属性 [data-slide="0"] 的 .slide-link 的后代。由于某物不能是其自身的后代，它没有任何返回值。但是，如果您在这些链接周围有一个包装器，那么这将起作用：$（' . slide-link-wrapper '）.find（'[data-slide ="0"]'）。addClass（'active'）; - user256430

请参见https://dev59.com/82855IYBdhLWcg3wsWr3。 - goodeye

Answer 1

使用属性等于选择器

$('.slide-link[data-slide="0"]').addClass('active');

Fiddle演示

.find()

它会沿着树向下查找元素。

获取当前匹配的每个元素的后代，过滤器为选择器、jQuery对象或元素。

- Tushar Gupta - curioustushar

---

我的错。我尝试过了，但是在错误的位置（在动态添加元素之前...）。无论如何，感谢你的努力！现在可以正常工作了。 - MrUpsidown

@MrUpsidown 欢迎，很乐意帮忙 :) - Tushar Gupta - curioustushar

哇！这个解决方案太棒了！我遇到问题好几个小时，但是这个解决了！ - user4579153

Answer 2

你也可以使用.filter()

$('.slide-link').filter('[data-slide="0"]').addClass('active');

- Anton

Answer 3

我搜索了一个相同的解决方案，只不过使用的是变量而不是字符串。
我希望我的解决方案能够帮助到某个人 :)

var numb = "3";
$(`#myid[data-tab-id=${numb}]`);

- Aleshanee

Answer 4

您也可以使用andSelf()方法来获取包装器DOM，然后find()就可以按照您的想法进行操作了。

$(function() {
  $('.slide-link').andSelf().find('[data-slide="0"]').addClass('active');
})

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="slide-link" href="#" data-slide="0">1</a>
<a class="slide-link" href="#" data-slide="1">2</a>
<a class="slide-link" href="#" data-slide="2">3</a>

- Girish

Answer 5

当需要返回具有不同数据属性和不同数据属性值的多个元素时，两者都不总是存在

<p class='my-class' data-attribute1='1'></p>
<p class='my-class' data-attribute2='2'></p>

// data-attribute1 OR data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute2="${secondID}"]`);

当需要返回具有不同数据属性和不同数据属性值的多个元素时，其中ARE始终存在

<p class='my-class' data-attribute1='1' data-attribute2='1'></p>
<p class='my-class' data-attribute1='1' data-attribute2='2'></p>

// data-attribute1 AND data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"][data-attribute2="${secondID}"]`);

逗号的位置对于区分使用OR或AND参数进行查找至关重要。

---

它也适用于具有相同数据属性但具有不同属性值的元素

$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute1="${secondID}"]`);

我受到了@omarjebari在stackoverflow上的这篇帖子的启发。

- Codingwiz