jQuery - Aggiungi ID invece di Class

94

Sto usando l'attuale jQuery :

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

Applica il testo contenuto nel breadcrumb a 4 elementi nella pagina, permettendomi di applicare uno stile specifico alla pagina.

Vorrei provare ad aggiungere un ID invece di una classe, come posso ottenere questo risultato?

jquery

— CLiown
fonte

Un ID deve essere univoco per essere XHTML valido. Un ID deve corrispondere a regole più rigide, ad esempio, senza spazi, iniziare con una lettera o _, contenere solo lettere, numeri o un numero limitato di altri caratteri.

— Doug Domeny

7

@Peter: l'aggiunta di un collegamento a wikipedia sembra un po 'ridondante.

— nickf

Possibile duplicato

— dell'aggiunta

Vedi anche addID in jQuery?

— Lazerbeak12345,

223

Prova questo:

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

Così diventa;

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

Quindi stai cambiando / sovrascrivendo l'id di tre elementi e aggiungendo un id a un elemento. Puoi modificare secondo le tue esigenze ...

— Sarfraz
fonte

1

Che ne dici di memorizzare nella cache? Piuttosto che creare 4 diversi oggetti jQuery di "this". var text = $ (questo) .text ();

— PetersenDidIt

@ petersendidt: d'accordo, ho detto nella mia risposta, che ha bisogno di modificare secondo le esigenze.

— Sarfraz

ancora meglio: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. non che usare un ID qui sia una buona idea.

— nickf

Funzionerà solo una volta, dopodiché l'ID cambia ... inoltre, continui a sovrascrivere gli stessi ID, quindi potresti anche farlo per $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(o last, per .stretch_footer). Comunque, questo è strano.

— Kobi

26

Tieni presente che questo sovrascrive qualsiasi ID che l'elemento ha già:

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

Il motivo per cui addClassesiste è perché un elemento può avere più classi, quindi non dovresti necessariamente sovrascrivere le classi già impostate. Ma con la maggior parte degli attributi, è consentito un solo valore alla volta.

— Anthony
fonte

11

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

— meouw
fonte

3

se vuoi "aggiungere all'ID" invece di sostituirlo

acquisire prima l'ID corrente, quindi aggiungere il nuovo ID. particolarmente utile per il bootstrap di Twitter che utilizza gli stati di input sui propri moduli.

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

se non lo fai, perderai tutte le proprietà precedentemente impostate.

hth,

— geekbuntu
fonte

Un elemento valido può avere solo un singolo ID. stackoverflow.com/questions/192048/…

— colonelclick

3

Lo sto facendo in 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