Changer l'ID d'un élément avec jQuery

302

J'ai besoin de changer l'ID d'un élément à l'aide de jQuery.

Apparemment, cela ne fonctionne pas:

jQuery(this).prev("li").attr("id")="newid"
jQuery(this).prev("li")="newid"

J'ai découvert que je peux y arriver avec le code suivant:

jQuery(this).prev("li")show(function() {
    this.id="newid";
});

Mais cela ne me semble pas juste. Il doit y avoir une meilleure façon, non? De plus, s'il n'y en a pas, quelle autre méthode puis-je utiliser au lieu d'afficher / masquer ou d'autres effets? Évidemment, je ne veux pas afficher / masquer ou affecter l'élément à chaque fois, juste pour changer son ID.

(Oui, je suis un débutant jQuery.)

Edit
Je ne peux pas utiliser de classes dans ce cas, je dois utiliser des identifiants.

javascript jquery yoavf
la source
5
En JavaScript, vous pouvez affecter à une variable ( foo = 1), un membre d'un objet ( foo.bar = 2ou foo['bar'] = 2) ou un indice de tableau ( foo[0] = 3), mais en l'affectant à une expression, comme le résultat d'un opérateur ( (x + b) = 5) ou le résultat d'un appel de fonction ( foo() = 1, foo(x).bar(y) = 7) n'a aucun sens, donc ce ne sera certainement pas la façon dont les choses fonctionneront dans jQuery ou dans toute autre bibliothèque JavaScript.
rakslice

Réponses:

521

Votre syntaxe est incorrecte, vous devez passer la valeur comme deuxième paramètre:

jQuery(this).prev("li").attr("id","newId");
Eran Galperin
la source
4
Je pense que newId devrait être entre guillemets
Jay Corbett
5
N'avez-vous pas besoin de détacher l'élément du DOM et de le remplacer par un nouvel élément avec un nouvel ID à sa place? Pour éviter de casser le DOM ...?
cllpse
15
jQuery s'occupe de cela, le coqéronacide.
McPherrinM
15
arrivé ici en vérifiant la réaffectation des identifiants - cela devrait-il maintenant être .prop( ... )au lieu de .attr( ... )?
Carl
2
@Carl selon les derniers documents et exemples jquery, iddevrait toujours être défini à l'aide deattr(...)
JoeBrockhaus
71

UNE OPTION PRÉFÉRÉE .attrest d'utiliser .propcomme ceci:

$(this).prev('li').prop('id', 'newId');

.attrrécupère l'attribut de l'élément tandis que .proprécupère la propriété référencée par l'attribut (c'est-à-dire ce que vous avez réellement l' intention de modifier)

Jeremy Moritz
la source
4
.attr est obsolète - c'est la bonne façon de le faire.
PointlessSpike
7
D'où viennent ces informations? api.jquery.com/attr ne dit rien sur la dépréciation ...
Sergej
Ce n'est pas obsolète. " Depuis jQuery 1.6 , la .prop()méthode fournit un moyen de récupérer explicitement les valeurs des propriétés, tout en .attr()récupérant les attributs."
Illuminateur
@ Illuminator J'ai corrigé ma réponse en conséquence. Merci.
Jeremy Moritz
45

Ce que vous voulez faire, c'est:

jQuery(this).prev("li").attr("id", "newID");

Cela définira l'ID sur le nouvel ID

Pim Jager
la source
11

J'ai fait quelque chose de similaire avec cette construction

$('li').each(function(){
  if(this.id){
    this.id = this.id+"something";
  }
});
Petr Safar
la source
7

Je ne sais pas quel est votre objectif, mais serait-il préférable d'utiliser à la place addClass? Je veux dire qu'un ID d'objets à mon avis devrait être statique et spécifique à cet objet. Si vous essayez simplement de ne pas l'afficher sur la page ou quelque chose comme ça, je mettrais ces détails dans une classe, puis je les ajouterais à l'objet plutôt que d'essayer de changer son ID. Encore une fois, je dis cela sans comprendre votre objectif sous-jacent.

Tim Knight
la source
3
les joies des anciens systèmes - je comprends alors votre douleur. La réponse d'Eran est certainement la meilleure alors.
Tim Knight
5
En fait, définir l'identifiant est une chose utile et utile à faire si vous créez le DOM en utilisant des modèles cachés dans le HTML, puis en les clonant à l'aide de jquery.
Steve Knight
5 
$("#LeNomDeMaBaliseID").prop('id', 'LeNouveauNomDeMaBaliseID');
Sébastien
la source
1
Cette solution était déjà fournie ici
Cristik
1
Veuillez ne pas publier de réponses uniquement en code - ajoutez toujours une explication à votre code dans la réponse.
Daniel W.
2 
<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

Cela pourrait servir à toutes fins. Ajoutez juste avant votre balise de fermeture de corps et ne faites pas pour ajouter Jquery.min.js

Prassanna D Manikandan
la source
0

La réponse d'Eran est bonne, mais j'ajouterais à cela. Vous devez surveiller toute interactivité qui n'est pas en ligne avec l'objet (c'est-à-dire, si un événement onclick appelle une fonction, il le sera toujours), mais s'il y a un traitement d'événement javascript ou jQuery attaché à cet ID, il sera essentiellement abandonné :

$("#myId").on("click", function() {});

Si l'ID est maintenant changé en # myID123, la fonction ci-dessus ne fonctionnera plus correctement d'après mon expérience.

rfornal
la source