getting xhtml custom attributes from jquery in IE

Question

hello,

i got some li elements with a custome attribute "type".

whe i try in jquery to get the value of this attribute width jquery like so:

$("li", $list).each(function(){
 console.log($(this).attr("type"));
 });

i only get the values in firefox but not in IE 7-8

any solutions?

Answer 1

type is a deprecated attribute for ul, ol, and li elements that IE still supports, along with start, value and compact. See http://www.w3.org/TR/html401/struct/lists.html#adef-type-OL.

Prefix your custom attributes with "data-". So you'd do instead:

<ul>
    <li data-type="foo">Item</li>
    <li data-type="bar">Item</li>
</ul>

and then:

$('li').each(function() {
    console.log($(this).attr('data-type'));
})

Then there won't be any reserved attribute name clashes in the future, with any browser.

See Custom Attributes in HTML 5 for more info.

Answer 2

Hi, I am trying to do the same thing, I have gone thru all the similar articles on stackoverflow n over the internet but it doesnt work for me.

I am able to access all the default attributes easily but I am not able to grab the custom attribute.

in the .ascx page I have elements that has a custom attribute:

<input id="update_title" type="text"  value="update title:"
                    data-helpid="3" style="width:270px;" />

and then in the javascript attached to the Master page I have

  $("[data-helpid]").each(function() {
    alert('test');   
});

I have tried many variabtions of it but it doesnt seem to work. What am I missing?