jQuery - ID anstelle von Klasse hinzufügen

94

Ich verwende die aktuelle jQuery :

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

Der im Breadcrumb enthaltene Text wird auf 4 Elemente auf der Seite angewendet, sodass ich speziell auf die Seite dort stylen kann.

Ich möchte versuchen, eine ID anstelle einer Klasse hinzuzufügen. Wie kann ich dies erreichen?

jquery CLiown
quelle
Eine ID muss eindeutig sein, um gültiges XHTML zu sein. Eine ID muss strengeren Regeln entsprechen, z. B. keine Leerzeichen, mit Buchstaben oder _ beginnen, nur Buchstaben, Zahlen oder eine begrenzte Anzahl anderer Zeichen enthalten.
Doug Domeny
7
@Peter: Das Hinzufügen eines Links zu Wikipedia scheint etwas überflüssig.
Nickf
Mögliches Duplikat des Attributs Hinzufügen in jQuery
Makyen
Siehe auch addID in jQuery?
Lazerbeak12345

Antworten:

223

Versuche dies:

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

So wird es;

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

Sie ändern / überschreiben also die ID von drei Elementen und fügen einem Element eine ID hinzu. Sie können nach Bedarf ändern ...

Sarfraz
quelle
1
Wie wäre es mit Caching? Anstatt 4 verschiedene jQuery-Objekte aus "this" zu erstellen. var text = $ (this) .text ();
PetersenDidIt
@petersendidt: stimmte zu, ich sagte in meiner Antwort, dass er nach Bedarf modifizieren muss.
Sarfraz
noch besser: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. nicht, dass es eine gute Idee ist, hier eine ID zu verwenden.
Nickf
Dies funktioniert nur einmal. Danach ändert sich die ID. Außerdem überschreiben Sie immer wieder dieselben IDs. Sie können dies also auch für $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(oder lastfür .stretch_footer) tun . Wie auch immer, das ist komisch.
Kobi
26

Beachten Sie, dass dadurch alle IDs überschrieben werden, die das Element bereits hat:

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

Der Grund dafür addClassliegt darin, dass ein Element mehrere Klassen haben kann, sodass Sie die bereits festgelegten Klassen nicht unbedingt überschreiben möchten. Bei den meisten Attributen ist jedoch jeweils nur ein Wert zulässig.

Anthony
quelle
11 
$('selector').attr( 'id', 'yourId' );
meouw
quelle
3

Wenn Sie der ID hinzufügen möchten, anstatt sie zu ersetzen

Erfassen Sie zuerst die aktuelle ID und fügen Sie dann Ihre neue ID hinzu. Besonders nützlich für Twitter-Bootstraps, die Eingabestatus für ihre Formulare verwenden.

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

Wenn Sie dies nicht tun, verlieren Sie alle Eigenschaften, die Sie zuvor festgelegt haben.

hth,

geekbuntu
quelle
Ein gültiges Element kann nur eine einzige ID haben. stackoverflow.com/questions/192048/...
colonelclick
3

Ich mache das 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
quelle