2009-01-22 7 views
9

¿Existe un método integrado o un complemento predeterminado de facto que le permitirá asignar automáticamente una ID única a un elemento en jQuery, o necesita implementar algo como esto usted mismo? Estoy buscando el jQuery equivalente a Prototype's identify method¿jQuery tiene un equivalente a Element.identify de Prototype?

Aquí hay un ejemplo. Tengo un poco de estructura HTML en una página que tiene este aspecto

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

quiero asignar cada uno de los tramos un ID que será único a la página. Así que después de llamar a algo como esto

$('#foo span').identify('prefix'); //fake code, no such method 

El DOM prestados sería algo como esto

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span id="prefix_2"></span> 
    <span id="prefix_3"></span> 
    <span id="prefix_4"></span> 
</div> 

¿Hay algo oficial-ish/robusta para jQuery, o se trata de algo que la mayoría de los desarrolladores de jQuery ruedan por su cuenta ?

+2

Nunca he necesitado algo como esto ... ¿Para qué lo usarías? Tenga en cuenta que jQuery funciona con conjuntos de elementos, mientras que Prototype funciona con elementos individuales; puede ser mejor que ajuste su lógica para que se ajuste a este modelo. – Shog9

+0

Ese es un buen punto; Pasé los últimos 6 meses con un prototipo. Originalmente había escrito un widget/complemento de jQuery que operaba en un elemento de una sola página, usando el #id para manejar manipuladores. Pensé que la forma más fácil de expandir mi código para operar en un conjunto sería una función de identificación.Claramente incorrecto –

+0

Deja tu comentario en una respuesta si todavía te preocupa la reputación del otro lado de 10k. –

Respuesta

22
jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if(this.id) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

probado esto en:

<span id='test_2'></span> 
<span>test1</span> 
<span>test2</span> 
<span>test3</span> 

lo convirtió a:

<span id="test_2"></span> 
<span id="test_1">test1</span> 
<span id="test_3">test2</span> 
<span id="test_4">test3</span> 
+1

El código funciona y es apreciado, pero todavía estoy buscando algo que haya existido desde hace mucho tiempo y que haya demostrado su eficacia (lo que de ninguna manera es una crítica al código provisto) –

+0

Busqué en el sitio web de jQuery antes de escribir esto y no pude encontrar nada, pero lo entiendo de donde vienes. Creo que lo cubrí todo, sin embargo. –

+0

Bien hecho Paolo. – Prestaul

3

No es que yo sepa, pero puede hacerlo usted mismo agregando el atributo id y suministrando un GUID.

Para añadir el atributo:

$(foo).attr("id", createGuid()); 

Para la ejecución createGuid(), see this question.

Tenga en cuenta que podría convertir esto fácilmente en jQuery plug-in para que esta función (incluso podría llamarla identify()) esté disponible en cualquier expresión $-.

+0

Sí, no es un concepto * demasiado * difícil de implementar. Otro enfoque sería almacenar un recuento de referencias en la función del complemento e incrementarla cada vez que se llamó. Estaba/estoy esperando algo más oficial que atrape cualquier caso límite en el que no haya pensado. –

+0

¡Entendido y acordado acerca de obtener un método más "nativo"! También estoy interesado en una mejor respuesta ... –

+0

(Se agradece la información/código, y vale la pena una votación positiva, en caso de que no fuera obvio) –

-1

quizás tratar

$("#foo span").each(function(){ 
    $(this).attr("id", "prefix_" + $(this).parent().index($(this))); 
}); 
+0

Esos no serán únicos en el mundo, lo que generalmente desea en una identificación. –

2

basado en la solución de Paolo:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

Un pequeño cambio que evitará volver a contar los ID ya utilizados.

+0

Así es como lo tenía originalmente, pero si solo hay un elemento llamado 'test_2', irá directamente a 'test_3' sin hacer 'test_1' - No estoy seguro si eso es deseado o no. –

+0

Sí, eso se debe al argumento "i" en la llamada "cada". Lo eliminé para evitar este problema. – gizmo

+0

Sí. Llegó a eso también. –

1

me gustaría modificar la función dada ligeramente y se convierten en:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while(document.getElementById(id) != null);    
     $(this).attr('id', id);    
    }); 
}; 

ID puede contener caracteres especiales que requerirían escapar con el fin de trabajar correctamente con el motor selector CSS jQuery - como "". Entonces, en lugar de encontrarlos y escapar de ellos, es más simple y más rápido reemplazarlos con el método del documento.

Cuestiones relacionadas