jQuery - Agregar ID en lugar de clase

94

Estoy usando el jQuery actual :

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').addClass($(this).text());
        $('#container').addClass($(this).text());
        $('.stretch_footer').addClass($(this).text())
        $('#footer').addClass($(this).text());
    });
});

Aplica el texto contenido en la ruta de navegación a 4 elementos de la página, lo que me permite aplicar un estilo específico a la página.

Me gustaría intentar agregar una identificación en lugar de una clase, ¿cómo puedo lograr esto?

jquery

— CLiown
fuente

Una identificación debe ser única para ser XHTML válido. Una identificación debe coincidir con reglas más estrictas, por ejemplo, sin espacios, comenzar con una letra o _, solo contener letras, números o un número limitado de otros caracteres.

— Doug Domeny

7

@Peter: agregar un enlace a wikipedia parece un poco redundante.

— nickf

Posible duplicado del atributo Adding en jQuery

— Makyen

Ver también addID en jQuery?

— Lazerbeak12345

223

Prueba esto:

$('element').attr('id', 'value');

Entonces se vuelve;

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').attr('id', $(this).text());
        $('#container').attr('id', $(this).text());
        $('.stretch_footer').attr('id', $(this).text())
        $('#footer').attr('id', $(this).text());
    });
});

Entonces, está cambiando / sobrescribiendo la identificación de tres elementos y agregando una identificación a un elemento. Puede modificar según sus necesidades ...

— Sarfraz
fuente

1

¿Qué tal el almacenamiento en caché? En lugar de hacer 4 objetos jQuery diferentes de "esto". var text = $ (esto) .text ();

— PetersenDidIt

@petersendidt: de acuerdo, dije en mi respuesta, que necesita modificar según las necesidades.

— Sarfraz

aún mejor: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. no es que usar una identificación aquí sea una buena idea.

— nickf

Esto solo funcionará una vez, después de lo cual la ID cambia ... además, sigue anulando las mismas ID, por lo que también puede hacerlo por $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(o last, por .stretch_footer). De todos modos, esto es extraño.

— Kobi

26

Tenga en cuenta que esto sobrescribe cualquier ID que el elemento ya tenga:

 $(".element").attr("id","SomeID");

La razón por la que addClassexiste es porque un elemento puede tener varias clases, por lo que no querrá necesariamente sobrescribir las clases ya configuradas. Pero con la mayoría de los atributos, solo se permite un valor en un momento dado.

— Antonio
fuente

11

$('selector').attr( 'id', 'yourId' );

— maullar
fuente

3

si desea 'agregar a la identificación' en lugar de reemplazarlo

Capture la identificación actual primero, luego agregue su nueva identificación. especialmente útil para twitter bootstrap que usa estados de entrada en sus formularios.

    new_id = '{{old_id}} inputSuccess';
    old_id = that.attr('id');
    that.attr('id', new_id.replace( /{{old_id}}/ig,old_id));

si no lo hace, perderá todas las propiedades que estableció anteriormente.

hth,

— geekbuntu
fuente

Un elemento válido solo puede tener una única identificación. stackoverflow.com/questions/192048/…

— colonelclick

3

Estoy haciendo esto en coffeescript

booking_module_time_clock_convert_id = () ->
  if $('.booking_module_time_clock').length
    idnumber = 1
    for a in $('.booking_module_time_clock')
      elementID = $(a).attr("id")
      $(a).attr( 'id', "#{elementID}_#{idnumber}" )
      idnumber++

— Nicolai
fuente