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

Question

我的代码以下面的方式为许多元素（Not For All Elements）设置了数据属性。

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

并且，对于某些元素（Not For All Elements），数据属性使用以下方法设置。

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

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

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

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

此处，不需要验证数据测试的值，而是要将层次结构中的第一个父级设置为“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

Answer 2

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

例如：$（＆＃39; [数据测试]，：数据（测试）＆＃39;）

Answer 3

试试这个：

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

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

Answer 4

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

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

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

<强> 2nd demo

Answer 5

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

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

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

Answer 6

您可以使用data-testing：

而不是设置.data()到attr()。

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

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

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

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

根据评论进行修改：

使用.attr()设置属性并使用.data()获取它们可能会出现问题（Eriks fiddle-example here）就是明证，因为后者只检查实际的元素属性一次。 / p>

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

我还是会在这里留下我的答案，因为如果不是这样的话，我仍会推荐它。