finding elements with data- attributes

[funbinod]

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.

[iwato]

Have you tried .attr(data)?

Roddy

[justsomeguy]

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.

[funbinod]

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.

[dsonesuk]

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

[funbinod]

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

[justsomeguy]

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.

[dsonesuk]

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').