Javascript 最近父级的 jQuery 数据属性选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29553815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery data attribute selector for closest parent
提问by DevD
My code have data attribute set for many elements (Not For All Elements) in below manner.
我的代码以以下方式为许多元素（不是所有元素）设置了数据属性。
<div id='dvStorage' data-testing='storage_div'>
<div id='dvStorage' data-testing='storage_div'>
And, for some of the elements (Not For All Elements) data attribute is set with below approach.
并且，对于一些元素（不是所有元素）数据属性是用下面的方法设置的。
$("#ElementID").data("testing", "data value");
$("#ElementID").data("testing", "data value");
Now, the problem comes. When any button on the document is clicked, I need to find its parent having data attribute (testing) is set. As mentioned, all elements do not have data attribute, so I need to travese upwards in the hierarchy until the expected element is found.
现在，问题来了。单击文档上的任何按钮时，我需要找到设置了数据属性（测试）的父级。如前所述，所有元素都没有 data 属性，所以我需要在层次结构中向上遍历，直到找到预期的元素。
For #1 approach, $("#buttonID").closest("[data-testing]")works. But not for #2 approach.
对于#1 方法，$("#buttonID").closest("[data-testing]")有效。但不适用于#2 方法。
For #2 approach, I need to iterate through button parents()and verify if it has .data("testing")or not. I need to avoid this iteration. And have one common approach that works for #1 and #2.
对于#2 方法，我需要遍历按钮parents()并验证它是否有.data("testing")。我需要避免这种迭代。并有一种适用于 #1 和 #2 的通用方法。
Here, it is not required to verify value of data-testing, but to get the first parent in hierarchy having "testing" set as its data attribute.
这里，不需要验证数据测试的值，而是获取层次结构中将“测试”设置为其数据属性的第一个父级。
Thanks in advance.
提前致谢。
采纳答案by Erik Philips
You only have two choices:
你只有两个选择：
As you mentioned in the first choice, you have to iterate through all of the elements because $("#ElementID").data("testing", "data value");will NOT update the attribute data-testing, because the value is stored internally in the DOM.
正如您在第一个选择中提到的，您必须遍历所有元素，因为$("#ElementID").data("testing", "data value");不会更新属性data-testing，因为该值存储在 DOM 内部。
The second method is to provide add another class that can be used in the selector:
第二种方法是提供添加另一个可以在选择器中使用的类：
$("#ElementID").data("testing", "data value").addClass("has-testing");
Thus your new selector would be:
因此，您的新选择器将是：
$("#buttonID").closest("[data-testing], .has-testing");
回答by MJ Vakili
回答by Mackan
Instead of setting data-testingthrough .data(), you can use attr():
相反设置的data-testing通过.data()，你可以使用attr()：
$("#div1").attr("data-testing", "div1_Data");
This will add the attribute and value to the element.
这会将属性和值添加到元素。
Then your normal selector should work:
那么你的普通选择器应该可以工作：
$("#buttonID").closest("[data-testing]")
Edit based on comments:
根据评论编辑：
Settings attributes using .attr()and getting them using .data()can be problematic (as evident by Eriks fiddle-example here), since the latter only checks the actual element attribute once.
使用.attr()和获取它们的设置属性.data()可能有问题（Eriks fiddle-example here很明显），因为后者只检查一次实际的元素属性。
I would suggest to use .attr()when both setting and getting, but since the implementation could not be changed this is not an option in this case.
我建议.attr()在设置和获取时使用，但由于无法更改实现，因此在这种情况下不是一个选项。
I'll leave my answer here anyway, as I would still recommend it if this was not the case.
无论如何，我都会在这里留下我的答案，因为如果不是这种情况，我仍然会推荐它。
回答by K K
Try this:
尝试这个：
$(this).parents("[data-testing]:first");
where $(this) will be the current clicked element inside the click handler.
其中 $(this) 将是点击处理程序中当前点击的元素。
回答by Ahosan Karim Asik
回答by Stack Overflow User
You can try below solution:
您可以尝试以下解决方案：
$("body *[data-testing]:first");
for your reference: http://jsfiddle.net/on24Lzxj/
供您参考：http: //jsfiddle.net/on24Lzxj/
