jQuery数据属性选择器用于最近的父元素

Question

我的代码为许多元素（不是所有元素）设置了数据属性，如下所示。

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

对于某些元素（不是所有元素），数据属性的设置方式如下。

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

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

对于第1种方法，$("#buttonID").closest("[data-testing]") 可行。但是对于第2种方法则不行。

对于第2种方法，我需要通过迭代按钮的 parents() 并验证它是否具有 .data("testing") 来实现。我需要避免这种迭代。并且拥有适用于#1和#2的一个公共方法。

这里无需验证data-testing的值，而是获取具有“testing”设置为其数据属性的层次结构中的第一个父元素。

提前致谢。

JSFIDDLE演示

- DevD

---

为什么不给我们展示一个完整代码的 DEMO Fiddle？ - Manwal

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示例

- Erik Philips

Answer 2

尝试使用这个（适用于#2）：data-selector。请点击此处查看更多信息。

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

- MJ Vakili

---

这非常棒，可惜它在jQueryUI中而不是核心jQuery中。似乎在UI之外也非常有用。 - Erik Philips

Answer 3

试试这个：

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

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

- K K

Answer 4

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

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

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

- Stack Overflow User

Answer 5

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

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

或者使用$(this).parents("[data-testing]")，根据您的选择

第二个演示

- Ahosan Karim Asik

Answer 6

不必通过.data()设置data-testing，您可以使用attr()：

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

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

然后您的普通选择器应该起作用：

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

基于评论进行编辑：

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

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

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

- Mackan

---

谢谢Mackan。但是，问题只涉及.data()，我不能更改实现方式。 - DevD

这也可能会有所得失。.data() 读取在第一次读取后被缓存，因此任何 attr() 更新在第一次之后都不会被 .data() 读取。JsFiddle 示例 - Erik Philips

@ErikPhilips 在你的示例中，你添加属性的方式有点奇怪。你从来没有添加过 data-，或者我误解了吗？更新后的示例：http://jsfiddle.net/bckq2uv1/1/ - Mackan

@Mackan 很好的发现！是的，我的例子是错误的。但你会注意到在第二次读取时，.data()并没有返回预期的larry :) - Erik Philips

@ErikPhilips 是的 - 上次我在手机上，所以我没有很好地了解情况。 按照我的理解，这确实是奇怪的行为，但再一次，我只会直接使用 attr() 。 data() 似乎有点...敏感 :) - Mackan