Jump to content
funbinod

finding elements with data- attributes

Recommended Posts

hello experts!

i mate a problem while trying to find elements with dynamically set data attribute.

first i set data attribute like this ...

$("span[class='matcosts']").data("itype", "F");

second i try to find it ...

	$(".regmattable").on("keyup", ".matcount", function(e) {
		alert($(".regmattable").find("span[class='matcosts'][data-itype='F']").length);
		// both 'matcount' and 'matclass' are insite 'regmattable'
	})

this above code alerts 0 (zero). but when i try to find the data from the 'matcosts' span (as below), it gives 'F' (as i passed it before).

		alert($(".regmattable").find("span[class='matcosts']").data("itype");

 

can u tell me where did i make mistake? and please can u guide me how can i achieve this????

 

thank you in advance.

Share this post


Link to post
Share on other sites

Have you tried .attr(data)?

Roddy

Share this post


Link to post
Share on other sites

If you look for just elements with span[class='matcosts'] or [data-itype='F'], does it find those?  Is it just an issue with the selector?  It would be interesting to look at the DOM in the developer tools when you run that to inspect that element and see if it actually adds a data attribute to it.

Share this post


Link to post
Share on other sites
7 hours ago, justsomeguy said:

If you look for just elements with span[class='matcosts'] or [data-itype='F'], does it find those?  Is it just an issue with the selector?  It would be interesting to look at the DOM in the developer tools when you run that to inspect that element and see if it actually adds a data attribute to it.

thank u for the reply.

but i didnot what you asked to check in the developer tools. i've checked in my own way if it adds a data attribute to the span or not. i had mentioned this above also.

i checked it in two ways.

after adding the data-itype i tried to count the span number with data-itype='F'

alert($(".regmattable").find("span[class='matcosts'][data-itype='F']").length);

it alerts 0 (zero).

but when i check if there is data-itype set

alert($(".regmattable").find("span[class='matcosts']").data("itype"));

it alerts 'F', as i've set earlier.

this means data-itype is set with the given value to the selected span, but i could not find the span with the data attribute.

Share this post


Link to post
Share on other sites

You have set an element to store values within a specific element using .data(), BUT! it does not set the custom data- attribute "itype", so it does not exit. The .data() will however pull already set inline custom data- attributes and values into .data(), where it can be read.

IF storing data using jQuery data object within element use .data()

IF inline data-xxxx  attribute use .attr() instead

Share this post


Link to post
Share on other sites

i solved the problem using ".attr('itype', itype)" instead of using .data(). but is it ok to use non-standard attributes?

Share this post


Link to post
Share on other sites

You should avoid using non-standard attributes, that's specifically what the data attributes are for.

but i didnot what you asked to check in the developer tools. i've checked in my own way if it adds a data attribute to the span or not.

That does not verify what I'm trying to verify.  You need to figure out if it changes the actual element in the DOM.  That means actually looking in the DOM, not relying on jQuery (which you're already having problems with).  For example, if jQuery stores those data values in some non-standard jQuery representation of the element, then using a selector to look for a data attribute will not find it.  So don't rely on jQuery to tell you what is going on, look at what is actually happening for yourself.

Share this post


Link to post
Share on other sites

Use custom 'data-'  attribute i.e. data-itype="F".

To set a value to 'data-itype' attribute, use .attr('data-itype', 'F')

To retrieve value use .attr('data-itype').

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×