Los que habrán usado alguna vez los famosos “custom attributes” o atributos personalizados en el html, conocerán que no era recomendado, nos complicaba las validaciones de HTML y también era potencialmente peligroso para futuras versiones de HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo" 
   orden="34">
</div>
 
var div = document.getElementById('categorias');
var orden = div.getAttribute('orden');
div.setAttribute('otro','algunValor');

HTML5 nos trae otra forma de verlo, todo attributo custom que utilicemos, hagamoslo con “data-*”, es decir siempre con el “data-” y nuestro custom, de esta manera el validador de html no molesta, ni tampoco tendremos problemas con futuras versiones de HTML:

<!DOCTYPE HTML>

<div id="categorias" class="contendor rojo" data-orden="34">
</div>
 
var div = document.getElementById('categorias');
var orden = div.getAttribute('data-orden');
div.setAttribute('data-otro', 'algunValor');

jQuery .data()

jQuery tiene un metodo, jQuery.data(), para poder guardar y recuperar objetos de un elemento en particular del DOM.

$('#categorias').data('orden', 56);

Lo que hay q tener en cuenta cuando utilizo el .data() es que jquery se encarga de comprobar la version de nuestro documento y va a utilizar el “data-” o no. Ojo con esto, porque por ahi contamos con que tenemos un atributo y en realidad no:

var valores = [ 20 , 21 , 22 , 23 ];
$('#categorias').data('orden', valores);
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo">
</div>
 
<!DOCTYPE HTML>

<div id="categorias" class="contendor rojo" 
   data-orden="[20,21,22,23]">
</div>

Cuando la version de HTML no es 5, jQuery no lo almacena como atributo del HTML, hay que tener cuidado con esto, porque si agregamos el atributo en el HTML y despues queremos ir a buscarlo no utilizando HTML 5, tenemos que obtenerlo como .attr() en vez de .data() en jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo" orden="43">
</div>
 
var orden = $('#categorias').data('orden'); // undefined

var orden = $('#categorias').attr('orden'); // 43