jQuery - Adicionar ID em vez de Classe

94

Estou usando o jQuery atual :

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

Ele aplica o texto contido na localização atual a 4 elementos na página, permitindo-me definir o estilo especificamente para a página ali presente.

Eu gostaria de tentar adicionar um ID em vez de uma classe, como posso fazer isso?

jquery

— CLiown
fonte

Um ID deve ser exclusivo para ser XHTML válido. Um ID deve corresponder a regras mais rígidas, por exemplo, sem espaços, começar com uma letra ou _, conter apenas letras, números ou um número limitado de outros caracteres.

— Doug Domeny

7

@Peter: adicionar um link para a wikipedia parece um pouco redundante.

— nickf

Possível duplicata de Adicionar atributo em jQuery

— Makyen

Veja também addID em jQuery?

— Lazerbeak12345

223

Experimente isto:

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

Assim acontece;

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

Portanto, você está alterando / substituindo o id de três elementos e adicionando um id a um elemento. Você pode modificar conforme suas necessidades ...

— Sarfraz
fonte

1

Que tal armazenamento em cache? Em vez de fazer 4 objetos jQuery diferentes "deste". var text = $ (this) .text ();

— PetersenDidIt

@petersendidt: concordo, eu disse na minha resposta, que ele precisa modificar conforme as necessidades.

— Sarfraz

ainda melhor: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. não que usar um ID aqui seja uma boa ideia.

— nickf

Isso funcionará apenas uma vez, após o qual o ID muda ... também, você continua substituindo os mesmos IDs, portanto, pode também fazer isso por $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(ou last, por .stretch_footer). Enfim, isso é estranho.

— Kobi

26

Lembre-se de que isso substitui qualquer ID que o elemento já tenha:

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

A razão pela qual addClassexiste é porque um elemento pode ter várias classes, então você não desejaria necessariamente sobrescrever as classes já definidas. Mas com a maioria dos atributos, há apenas um valor permitido em um determinado momento.

— Anthony
fonte

11

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

— meouw
fonte

3

se você quiser 'adicionar ao id' ao invés de substituí-lo

capture a id atual primeiro e, em seguida, anexe sua nova id. especialmente útil para bootstrap do Twitter que usa estados de entrada em seus formulários.

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

se não o fizer, perderá todas as propriedades definidas anteriormente.

hth,

— geekbuntu
fonte

Um elemento válido só pode ter um único id. stackoverflow.com/questions/192048/…

— colonelclick

3

Estou fazendo isso em 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
fonte