javascript - functions - jquery function example

¿JQuery tiene un equivalente a Element.identify de Prototype?

Question

¿Existe un método incorporado o un complemento predeterminado de facto que le permitirá asignar automáticamente un ID único a un elemento en jQuery, o necesita implementar algo como esto usted mismo? Estoy buscando el jQuery equivalente al método de identificación de Prototype

Aquí hay un ejemplo. Tengo una estructura HTML en una página que se parece a esto

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

Quiero asignar a cada uno de los tramos una identificación que será exclusiva de la página. Entonces, después de llamar algo como esto

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

El DOM renderizado se vería como este

<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 / robusto para jQuery, o es algo que la mayoría de los desarrolladores de jQuery desarrollan por sí solos?

Answer 1

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.

Answer 2

Tal vez intente

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

Answer 3

Modificaría la función dada un poco y lo haría:

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);            
    });
};

Las ID podrían contener caracteres especiales que requerirían escaparse para funcionar correctamente con el motor selector de CSS de 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.

Answer 4

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>

Answer 5

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

Para agregar el atributo:

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

Para la implementación de createGuid() , vea esta pregunta .

Tenga en cuenta que puede convertir esto fácilmente en un complemento de jQuery para que esta función (incluso podría nombrarla identify() ) esté disponible en cualquier $- expresión.