[javascript] Changing an element's ID with jQuery

I need to change an element's ID using jQuery.

Apparently these don't work:

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

I found out that I can make it happen with the following code:

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

But that doesn't seem right to me. There must be a better way, no? Also, in case there isn't, what other method can I use instead of show/hide or other effects? Obviously I don't want to show/hide or affect the element every time, just to change its ID.

(Yep, I'm a jQuery newbie.)

Edit
I can't use classes in this case, I must use IDs.

What you mean to do is:

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

That will set the ID to the new ID

I did something similar with this construct

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

I'm not sure what your goal is, but might it be better to use addClass instead? I mean an objects ID in my opinion should be static and specific to that object. If you are just trying to change it from showing on the page or something like that I would put those details in a class and then add it to the object rather then trying to change it's ID. Again, I'm saying that without understand your underlining goal.

I'm not sure what your goal is, but might it be better to use addClass instead? I mean an objects ID in my opinion should be static and specific to that object. If you are just trying to change it from showing on the page or something like that I would put those details in a class and then add it to the object rather then trying to change it's ID. Again, I'm saying that without understand your underlining goal.

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

A PREFERRED OPTION over .attr is to use .prop like so:

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

.attr retrieves the element's attribute whereas .prop retrieves the property that the attribute references (i.e. what you're actually intending to modify)

$('#id-you-want-to-change').attr('id', 'id-you-want-it-to-be');

What you mean to do is:

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

That will set the ID to the new ID

A PREFERRED OPTION over .attr is to use .prop like so:

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

.attr retrieves the element's attribute whereas .prop retrieves the property that the attribute references (i.e. what you're actually intending to modify)

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

I did something similar with this construct

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

I'm not sure what your goal is, but might it be better to use addClass instead? I mean an objects ID in my opinion should be static and specific to that object. If you are just trying to change it from showing on the page or something like that I would put those details in a class and then add it to the object rather then trying to change it's ID. Again, I'm saying that without understand your underlining goal.

Eran's answer is good, but I would append to that. You need to watch any interactivity that is not inline to the object (that is, if an onclick event calls a function, it still will), but if there is some javascript or jQuery event handling attached to that ID, it will be basically abandoned:

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

If the ID is now changed to #myID123, the function attached above will no longer function correctly from my experience.

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

This could do for all purpose. Just add before your body closing tag and don't for get to add Jquery.min.js

What you mean to do is:

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

That will set the ID to the new ID

I did something similar with this construct

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

$('#id-you-want-to-change').attr('id', 'id-you-want-it-to-be');

I'm not sure what your goal is, but might it be better to use addClass instead? I mean an objects ID in my opinion should be static and specific to that object. If you are just trying to change it from showing on the page or something like that I would put those details in a class and then add it to the object rather then trying to change it's ID. Again, I'm saying that without understand your underlining goal.

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

This could do for all purpose. Just add before your body closing tag and don't for get to add Jquery.min.js

Eran's answer is good, but I would append to that. You need to watch any interactivity that is not inline to the object (that is, if an onclick event calls a function, it still will), but if there is some javascript or jQuery event handling attached to that ID, it will be basically abandoned:

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

If the ID is now changed to #myID123, the function attached above will no longer function correctly from my experience.