jQuery按数据属性值查找元素

103

我有如下几个元素：

<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');

任何想法？

— 先生先生
source

2

在这里稍微解释一下，之所以不起作用，是因为您正在尝试.slide-link使用的属性来查找的后代[data-slide="0"]。由于某些东西不能成为其自身的后代，因此它没有任何返回值。但是，如果您在这些链接周围使用了包装器，那么它可能会起作用：$('.slide-link-wrapper').find('[data-slide="0"]').addClass('active');

— DondeEstaMiCulo 2014年

另请参见stackoverflow.com/q/4191386/292060

— goodeye 2015年

223

使用属性等于选择器

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

Fiddle Demo

。找（）

它在树上起作用

获取当前匹配元素集中每个元素的后代，并通过选择器，jQuery对象或元素进行过滤。

— Tushar Gupta-好奇
source

2

我的错。我试过了，但是在错误的地方（动态添加元素之前）。无论如何，感谢您的努力！工作良好。

— MrUpsidown

@MrUpsidown欢迎您为我们提供帮助：)

— Tushar Gupta-curioustushar 2014年

1

哇！这个解决方案很棒！几个小时出现了问题，但这已经解决了！

我如何将其等于变量值var slidernumber = "0";而不是常量"0"？

— 托尼·吉

如果由于某种原因您不能依赖某个特定的类，则可以在第一部分使用通配符，例如$（'* [data-slide =“ 0”]'）。addClass（'active'） ;

— SeanMC '17

58

您也可以使用.filter（）

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

— 安东
source

5

我用变量而不是字符串搜索了相同的解决方案。
我希望我可以帮助某人解决我的问题:)

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

— 亚历山尼
source

3

您还可以使用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>

展开摘要

— 吉里什
source