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

Question

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

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 的通用方法。

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

提前致谢。

JSFIDDLE Demo

Answer 1

你只有两个选择:

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

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

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

因此您的新选择器将是:

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

JS Fiddle Example