jQuery最近父级的数据属性选择器

jQuery data attribute selector for closest parent

本文关键字：数据属性 选择器 最近 jQuery      更新时间：2023-09-26

我的代码以以下方式为许多元素（并非所有元素）设置了数据属性。

  1. <div id='dvStorage' data-testing='storage_div'>

并且，对于某些元素（并非所有元素），数据属性是用以下方法设置的。

  1. $("#ElementID").data("testing", "data value");

现在，问题来了。当单击文档上的任何按钮时，我需要找到设置了数据属性（测试）的其父项。如前所述，所有元素都没有数据属性，所以我需要在层次结构中向上移动，直到找到期望的元素。

对于#1方法，$("#buttonID").closest("[data-testing]")起作用。但不适用于#2方法。

对于#2方法，我需要遍历按钮parents()，并验证它是否有.data("testing")。我需要避免这种重复。并且有一个适用于#1和#2的通用方法。

这里，不需要验证数据测试的值，而是获取层次结构中第一个将"测试"设置为其数据属性的父级。

提前谢谢。

JSFIDDLE演示

您只有两个选择：

正如您在第一个选项中提到的，您必须遍历所有元素，因为$("#ElementID").data("testing", "data value");不会更新属性data-testing，因为该值存储在DOM内部。

第二种方法是提供添加另一个可以在选择器中使用的类：

$("#ElementID").data("testing", "data value").addClass("has-testing");

因此，您的新选择器将是：

$("#buttonID").closest("[data-testing], .has-testing");

JS Fiddle示例

试试这个（适用于#2）：数据选择器

e.g: $('[data-testing] , :data(testing)')

试试这个：

$(this).parents("[data-testing]:first");

其中$（this）将是单击处理程序中当前单击的元素。

您可以尝试以下解决方案：

$("body *[data-testing]:first");

供您参考：http://jsfiddle.net/on24Lzxj/

试试这个：$("#buttonID").closest(["data-testing"])只需更改为以下内容：

$("#buttonID").closest("[data-testing]");

或将$(this).parents("[data-testing]")用于您选择的

第二次演示

您可以使用attr():而不是设置data-testing到.data()

$("#div1").attr("data-testing", "div1_Data");

这将向元素添加属性和值。

然后你的正常选择器应该工作：

$("#buttonID").closest("[data-testing]")

根据评论进行编辑：

使用.attr()设置属性和使用.data()获取属性可能会有问题（正如Eriks-fiddle示例所示），因为后者只检查一次实际元素属性。

我建议在设置和获取时都使用.attr()，但由于无法更改实现，在这种情况下，这不是一个选项。

无论如何，我会把我的答案留在这里，因为如果不是这样的话，我仍然会推荐它。

相关文章：