jQuery data attribute selector for closest parent

Question

My code have data attribute set for many elements (Not For All Elements) in below manner.

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

And, for some of the elements (Not For All Elements) data attribute is set with below approach.

2. $("#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.

For #1 approach, $("#buttonID").closest("[data-testing]") works. But not for #2 approach.

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.

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.

JSFIDDLE Demo

Answer 1

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.

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");

JS Fiddle Example