funbinod 3 Posted May 29, 2018 Report Share Posted May 29, 2018 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. Quote Link to post Share on other sites
iwato 19 Posted May 29, 2018 Report Share Posted May 29, 2018 Have you tried .attr(data)? Roddy Quote Link to post Share on other sites
justsomeguy 1,135 Posted May 29, 2018 Report Share Posted May 29, 2018 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. Quote Link to post Share on other sites
funbinod 3 Posted May 30, 2018 Author Report Share Posted May 30, 2018 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. Quote Link to post Share on other sites
dsonesuk 913 Posted May 30, 2018 Report Share Posted May 30, 2018 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 Quote Link to post Share on other sites
funbinod 3 Posted May 30, 2018 Author Report Share Posted May 30, 2018 i solved the problem using ".attr('itype', itype)" instead of using .data(). but is it ok to use non-standard attributes? Quote Link to post Share on other sites
justsomeguy 1,135 Posted May 30, 2018 Report Share Posted May 30, 2018 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. Quote Link to post Share on other sites
dsonesuk 913 Posted May 30, 2018 Report Share Posted May 30, 2018 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'). Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.