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
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

521

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

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

— Eran Galperin
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
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
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
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
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
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
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
source