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

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