JQuery 通过数据属性值查找元素

我有以下几个要素:

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

知道吗？

318131 次浏览
小开
最佳答案

使用 属性等于选择器

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

Fiddle Demo

。发现()

它在树下起作用

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

小开

也可以使用 。过滤()

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

你也可以使用 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>

小开

我用一个变量而不是 String 搜索相同的解决方案。我希望我能帮助别人解决我的问题

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

在查找返回具有不同数据属性和不同数据属性值的多个元素时，不是始终存在

<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}"]`);

在查找返回具有不同数据属性和不同数据属性值的多个元素时，是始终存在

<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}"]`);

逗号的位置对于区分使用 或者或 还有参数的发现是至关重要的。

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

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

我的灵感来自于这篇关于堆栈溢出的 @ omarjebari文章。


提交答案