javascript - Jquery custom attributes

Question

I'm thinking about using custom attributes in Jquery to avoid using class or id attributes, to not interfere with the html designers.

Taking into account this idea, the html should be pieces like:

<ul Jquery="CommonUl">
    <li Jquery="CommonLi"></li>     
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
    <li Jquery="CommonLi"></li>
</ul>

• Do you think this is a good approach?

• What is your opinion about the W3C validation of these custom attributes?

• Do you know any way to program with Jquery without interfering with the work of the html designers?

• About the performance, I suppose that with class attributes or ids the jquery selectors are faster than using a custom attribute and filtering functions like "contains, etc...". Is this right?

Answer 1

You can do this, use data- attributes though (part of the HTML5 specification), like this:

<li data-something="CommonLi"></li> 

jQuery even has built-in support for these in 1.4.3+, for example:

$("li").data("something") //"CommonLi"

For your other questions:

• They'll validate if it's HTML5 - but won't break anything in HTML4
• This shouldn't interfere with the designer, but it'll depend on which designer
• If you're fetching from an element, the performance is the same as any other attribute