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

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