jQuery - Ajouter un ID au lieu de la classe

94

J'utilise le jQuery actuel :

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

Il applique le texte contenu dans le fil d'Ariane à 4 éléments de la page, me permettant de styliser spécifiquement la page qui s'y trouve.

J'aimerais essayer d'ajouter un identifiant au lieu d'une classe, comment puis-je y parvenir?

jquery

— CLiown
source

Un identifiant doit être unique pour être XHTML valide. Un ID doit correspondre à des règles plus strictes, par exemple, pas d'espaces, commencer par une lettre ou _, ne contenir que des lettres, des chiffres ou un nombre limité d'autres caractères.

— Doug Domeny

7

@Peter: l'ajout d'un lien vers wikipedia semble un peu redondant.

— nickf

— Double

Voir aussi addID dans jQuery?

— Lazerbeak12345

223

Essaye ça:

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

Alors ça devient;

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

Vous modifiez / écrasez donc l'identifiant de trois éléments et ajoutez un identifiant à un élément. Vous pouvez modifier selon vos besoins ...

— Sarfraz
source

1

Et la mise en cache? Plutôt que de créer 4 objets jQuery différents de "this". var text = $ (this) .text ();

— PetersenDidIt

@petersendidt: d'accord, j'ai dit dans ma réponse, qu'il doit modifier selon les besoins.

— Sarfraz

encore mieux: $('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());.. pas que l'utilisation d'un identifiant ici soit une bonne idée.

— nickf

Cela ne fonctionnera qu'une seule fois, après quoi l'ID change ... aussi, vous continuez à remplacer les mêmes ID, donc vous pouvez aussi bien le faire pour $('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())(ou last, pour .stretch_footer). Quoi qu'il en soit, c'est bizarre.

— Kobi

26

Gardez à l'esprit que cela écrase tout ID que l'élément possède déjà:

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

La raison pour laquelle addClassexiste est qu'un élément peut avoir plusieurs classes, vous ne voudriez donc pas nécessairement écraser les classes déjà définies. Mais avec la plupart des attributs, une seule valeur est autorisée à un moment donné.

— Anthony
source

11

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

— meouw
source

3

si vous voulez 'ajouter à l'identifiant' plutôt que le remplacer

capturez d'abord l'identifiant actuel, puis ajoutez votre nouvel identifiant. particulièrement utile pour le bootstrap de Twitter qui utilise des états d'entrée sur leurs formulaires.

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

si vous ne le faites pas, vous perdrez toutes les propriétés définies précédemment.

hth,

— geekbuntu
source

Un élément valide ne peut avoir qu'un seul identifiant. stackoverflow.com/questions/192048/…

— colonelclick

3

Je fais ça dans 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
source