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

Question

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

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

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

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

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

这里不需要验证data-testing的值，而是获取hierarchy中的第一个parent"testing"设置为它的数据属性。

提前致谢。

Answer 1

试试这个：

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

其中 $(this) 将是点击处理程序中当前点击的元素。

Answer 2

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

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

或使用$(this).parents("[data-testing]")供您选择

Answer 3

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

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

Answer 4

你只有两个选择：

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

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

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

因此您的新选择器将是：

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

Answer 5

您可以使用 attr():

而不是通过 .data() 设置 data-testing

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

这会将属性和值添加到元素。

那么您的普通选择器应该可以工作：

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

根据评论编辑：

使用 .attr() 设置属性并使用 .data() 获取它们可能会出现问题（正如 Eriks fiddle-example here 所证明的那样），因为后者仅检查实际元素属性一次。

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

无论如何我都会在这里留下我的答案，因为如果不是这种情况我仍然会推荐它。

Answer 6

试试这个（为 #2 工作）：data-selector

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

jQuery data attribute selector for closest parent