jQuery cannot get custom attributes on UL elements

Question

I am currently focussing the following issue with jQuery 1.8.2.

Custom attributes are working fine for e.g. input fields:

<input id="test" required="true">

$("#test").prop("required")

true

$("#test").get(0).required

true

But not with UL elements.

<ul id="test" required="true"></ul>

$("#test").prop("required")

undefined

$("#test").get(0).required

undefined

Any ideas why it does not work with UL elements in Firefox 16 but in MSIE 8? Thanks!

Answer 1

If you need to use custom attributes for one reason or another, check out HTML5 data- attributes.

<ul id="test" data-required="true"></ul>

console.log($('#test').data('required'));

http://ejohn.org/blog/html-5-data-attributes/

http://api.jquery.com/data/#data-html5

Answer 2

That's because HTML5 required is a valid property for input elements and jQuery returns the value of this property, and for an ul element required is just an invalid attribute. An ul element has no required property, so it's undefined.

http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-required-attribute

Answer 3

You must use:

$('#test').attr('required')