Question

24

jQuery data attribute selector for closest parent

rated 0 times [ 31] [ 7] / answers: 1 / hits: 34286 / 9 Years ago, fri, april 10, 2015, 12:00:00

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

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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

xochitl

Add To Favorites

Follow

Total Points: 559

Total Questions: 95

Total Answers: 117

Location: Antigua and Barbuda

Member since Sat, Apr 24, 2021

3 Years ago

answered 9 Years ago mira · Accepted Answer

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