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

Respostas:

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