Alterando o ID de um elemento com jQuery

302

Eu preciso alterar a identificação de um elemento usando jQuery.

Aparentemente, estes não funcionam:

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

Descobri que posso fazer isso acontecer com o seguinte código:

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

Mas isso não parece certo para mim. Deve haver uma maneira melhor, não? Além disso, caso não exista, que outro método posso usar em vez de mostrar / ocultar ou outros efeitos? Obviamente, não quero mostrar / ocultar ou afetar o elemento todas as vezes, apenas para alterar seu ID.

(Sim, eu sou um novato em jQuery.)

Editar
Não posso usar classes neste caso, devo usar IDs.

javascript jquery yoavf
fonte
5
Em JavaScript, você pode atribuir a uma variável ( foo = 1), um membro de um objeto ( foo.bar = 2ou foo['bar'] = 2) ou um subscrito de matriz ( foo[0] = 3), mas atribuir a uma expressão, como o resultado de um operador ( (x + b) = 5) ou o resultado de uma chamada de função ( foo() = 1, foo(x).bar(y) = 7) não faz sentido, por isso definitivamente não será da maneira que as coisas funcionam no jQuery ou em qualquer outra biblioteca JavaScript.
rakslice

Respostas:

521

Sua sintaxe está incorreta, você deve passar o valor como o segundo parâmetro:

jQuery(this).prev("li").attr("id","newId");
Eran Galperin
fonte
4
Acho newId deve estar entre aspas
Jay Corbett
5
Você não precisa desanexar o elemento do DOM e substituí-lo por um novo elemento por um novo ID no local? Para evitar quebrar o DOM ...?
Cllpse
15
O jQuery cuida disso, roosteronácido.
McPherrinM
15
chegou aqui, verificando novamente a reatribuição de identificação - isso deve ser agora em .prop( ... )vez de .attr( ... )?
Carl
2
@Carl acordo com as últimas docs jQuery e exemplos, idainda deve ser definido usandoattr(...)
JoeBrockhaus
71

Uma OPÇÃO PREFERIDA acima .attré usar da seguinte .propmaneira:

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

.attrrecupera o atributo do elemento, enquanto .proprecupera a propriedade que o atributo faz referência (ou seja, o que você realmente pretende modificar)

Jeremy Moritz
fonte
4
.attr foi descontinuado - esta é a maneira correta de fazer isso.
precisa
7
De onde vem esta informação? api.jquery.com/attr não diz nada sobre depreciação ...
Sergej
Não está obsoleto. " A partir do jQuery 1.6 , o .prop()método fornece uma maneira de recuperar explicitamente os valores das propriedades, enquanto .attr()recupera os atributos."
Iluminador
@ Illuminator Corrigi minha resposta de acordo. Obrigado.
Jeremy Moritz
45

O que você pretende fazer é:

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

Isso definirá o ID para o novo ID

Pim Jager
fonte
11

Eu fiz algo semelhante com essa construção

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

Não sei ao certo qual é seu objetivo, mas seria melhor usar o addClass? Quero dizer que um ID de objetos na minha opinião deve ser estático e específico para esse objeto. Se você está apenas tentando alterar a exibição na página ou algo parecido, eu colocaria esses detalhes em uma classe e os adicionaria ao objeto em vez de tentar alterar seu ID. Mais uma vez, estou dizendo isso sem entender seu objetivo sublinhado.

Tim Knight
fonte
3
as alegrias dos sistemas legados - entendo sua dor então. A resposta de Eran é definitivamente a melhor então.
Tim Knight
5
Na verdade, definir o ID é algo útil e útil se você estiver construindo o DOM usando modelos ocultos no HTML e clonando-os usando o jquery.
Steve Knight
5 
$("#LeNomDeMaBaliseID").prop('id', 'LeNouveauNomDeMaBaliseID');
Sébastien
fonte
1
Esta solução já foi fornecido aqui
Cristik
1
Não poste respostas somente de código - sempre adicione uma explicação ao seu código na resposta.
Daniel W.
2 
<script>
       $(document).ready(function () {
           $('select').attr("id", "newId"); //direct descendant of a
       });
</script>

Isso poderia ser feito para todos os fins. Basta adicionar antes da tag de fechamento do corpo e não adicionar Jquery.min.js

Prassanna D Manikandan
fonte
0

A resposta de Eran é boa, mas eu acrescentaria isso. Você precisa observar qualquer interatividade que não esteja alinhada com o objeto (ou seja, se um evento onclick chamar uma função, ainda o fará), mas se houver alguma manipulação de evento javascript ou jQuery anexada a esse ID, ela será basicamente abandonada :

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

Se o ID agora for alterado para # myID123, a função anexada acima não funcionará mais corretamente com a minha experiência.

rfornal
fonte