Modifica dell'ID di un elemento con jQuery

302

Devo cambiare l'ID di un elemento usando jQuery.

Apparentemente questi non funzionano:

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

Ho scoperto che posso farlo accadere con il seguente codice:

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

Ma questo non mi sembra giusto. Deve esserci un modo migliore, no? Inoltre, in caso contrario, quale altro metodo posso usare al posto di show / hide o altri effetti? Ovviamente non voglio mostrare / nascondere o influenzare l'elemento ogni volta, solo per cambiare il suo ID.

(Sì, sono un principiante di jQuery.)

Modifica
Non posso usare le classi in questo caso, devo usare gli ID.

javascript jquery

— yoavf
fonte

5

In JavaScript, puoi assegnare a una variabile ( foo = 1), un membro di un oggetto ( foo.bar = 2o foo['bar'] = 2) o un indice di matrice ( foo[0] = 3), ma assegnando a un'espressione, come il risultato di un operatore ( (x + b) = 5) o il risultato di una chiamata di funzione ( foo() = 1, foo(x).bar(y) = 7) non ha alcun senso, quindi non sarà sicuramente il modo in cui funzionano le cose in jQuery o in qualsiasi altra libreria JavaScript.

— Rakslice,

521

La sintassi non è corretta, dovresti passare il valore come secondo parametro:

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

— Eran Galperin
fonte

4

Penso che newId dovrebbe essere tra virgolette

— Jay Corbett l'

5

Non è necessario staccare l'elemento dal DOM e sostituirlo con un nuovo elemento con un nuovo ID al suo posto? Per evitare di rompere il DOM ...?

— cllpse

15

jQuery se ne occupa, roosteronacid.

— McPherrinM,

15

arrivato qui ricontrollando ID riassegnazione - questo dovrebbe essere ora .prop( ... )invece di .attr( ... )?

— Carl

2

@Carl secondo gli ultimi documenti ed esempi jquery, iddovrebbe ancora essere impostato usandoattr(...)

— JoeBrockhaus

71

Un'OPZIONE PREFERITA .attrè quella di utilizzare in questo .propmodo:

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

.attrrecupera l'attributo dell'elemento mentre .proprecupera la proprietà a cui fa riferimento l'attributo (ovvero ciò che si intende effettivamente modificare)

— Jeremy Moritz
fonte

4

.attr è stato deprecato: questo è il modo corretto di farlo.

— PointlessSpike

7

Da dove viene questa informazione? api.jquery.com/attr non dice nulla sulla deprecazione ...

— Sergej,

Non è deprecato. " A partire da jQuery 1.6 , il .prop()metodo fornisce un modo per recuperare esplicitamente i valori delle proprietà, mentre .attr()recupera gli attributi."

— Illuminatore

@Illuminator Ho corretto la mia risposta di conseguenza. Grazie.

— Jeremy Moritz,

45

Quello che intendi fare è:

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

Ciò imposterà l'ID sul nuovo ID

— Pim Jager
fonte

11

Ho fatto qualcosa di simile con questo costrutto

$('li').each(function(){
  if(this.id){
    this.id = this.id+"something";
  }
});

— Petr Safar
fonte

7

Non sono sicuro di quale sia il tuo obiettivo, ma potrebbe essere preferibile utilizzare addClass invece? Voglio dire, un ID oggetto secondo me dovrebbe essere statico e specifico per quell'oggetto. Se stai solo cercando di cambiarlo dalla visualizzazione sulla pagina o qualcosa del genere, metterei quei dettagli in una classe e poi li aggiungerei all'oggetto piuttosto che provare a cambiare il suo ID. Ancora una volta, lo sto dicendo senza capire il tuo obiettivo sottolineato.

— Tim Knight
fonte

3

le gioie dei sistemi legacy - Capisco il tuo dolore allora. La risposta di Eran è sicuramente la migliore allora.

— Tim Knight,

5

In realtà l'impostazione dell'id è una cosa utile e utile da fare se stai costruendo il DOM usando template nascosti nell'HTML e poi clonandoli usando jquery.

— Steve Knight,

5

$("#LeNomDeMaBaliseID").prop('id', 'LeNouveauNomDeMaBaliseID');

— Sébastien
fonte

1

Questa soluzione era già stata fornita qui

— Cristik,

1

Si prega di non pubblicare risposte di solo codice - aggiungere sempre una spiegazione al codice nella risposta.

— Daniel W.

2

<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

Questo potrebbe fare per tutti gli scopi. Basta aggiungere prima del tag di chiusura del corpo e non per aggiungere Jquery.min.js

— Prassanna D Manikandan
fonte

0

La risposta di Eran è buona, ma la aggiungerei. Devi guardare qualsiasi interattività che non è in linea con l'oggetto (cioè, se un evento onclick chiama una funzione, lo farà comunque), ma se c'è qualche gestione degli eventi javascript o jQuery collegata a quell'ID, sarà sostanzialmente abbandonata :

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

Se l'ID è ora cambiato in # myID123, la funzione allegata sopra non funzionerà più correttamente dalla mia esperienza.

— rfornal
fonte