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

if you're planning to have several attribute I suggest to set a unique namespaced attribute, e.g.

<li data-yourapp>...</li>

and use that attribute like an hashtable

$("li").data("yourapp", { 
   points  : 2000,
   life    : 1,
   weapons : {
      firegun  : 0,
      missiles : 12
   }
});

in this way you will reduce element access and you will retrieve all custom data once

Answer 2

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

Answer 3

I would personally recommend you to using jquery builtin method for saving data with each element. following is the code snippet for saving data:

$("ul").data("CommonUl");
$("li").data("CommonLi");