jQuery:通过数据属性值查找元素
在 HTML 标记中,元素可以使用 data-* 为其分配自定义数据属性属性语法。这些属性通常用于存储可由 JavaScript 代码访问或操作的附加信息。
一个常见用例是根据元素的数据属性值将特定类添加到元素。例如,考虑以下 HTML 元素:
<a class="slide-link" href="#" data-slide="0">1</a><br><a class="slide-link" href="#" data-slide="1">2</a><br><a class="slide-link" href="#" data- Slide="2">3</a><br>
我们的目标是向 data-slide 属性值为 0(零).
属性等于选择器
jQuery 提供了一个属性等于选择器,允许我们根据特定属性的确切值来选择元素。为了实现我们的目标,我们可以使用以下代码:
$('.slide-link[data-slide="0"]').addClass('active');<br>
此代码选择类为“slide-link”且 data-slide 属性等于“0”的元素。然后添加“active”类。
理解 .find()
最初尝试中使用的 .find() 方法有效通过遍历 DOM 树。但是,在这种情况下,我们希望根据其数据属性而不是其后代来选择元素。因此,使用属性 equals 选择器更适合此任务。
以上是如何使用 jQuery 根据元素的数据属性值向元素添加类?的详细内容。更多信息请关注PHP中文网其他相关文章!