15

I am new to jQuery and would like to update an element's id. My approach is:

  1. select this element by its id

  2. overwrite this id with a new value.

would you mind telling me where my mistake is?

Thanks!

Below is the HTML code:

<tr><th><label for="id_aerial_size_dist">Aerial size dist:</label></th><td><select name="aerial_size_dist" id="id_aerial_size_dist">
<option value="a">Very Fine to Fine</option>
<option value="b">Fine to Medium (EFED Default)</option>
<option value="c">Medium to Coarse</option>
<option value="d">Coarse to Very Coarse</option>
</select></td></tr>

jquery

<script type="text/javascript" src=" ../stylesheets/jQuery-1.7.2.js"></script> 

<script>
$(document).ready(function() {

    $('#id_aerial_size_dist').attr('id', 'id_a');

    });
</script>
TTT
  • 4,354
  • 13
  • 73
  • 123

2 Answers2

39

Yes there is a way to change any attribute.

$('#your_element').attr('id','the_new_id');

Then again, this is definitely not recommended and it is also a pretty bad practice. You can however use classes for the same functionality.

$('.my_class').removeClass('my_class').addClass('normal_element');

If you tell me what you need to do I will help you out with a solution.

  • Your `.attr()` example is the same as what the OP had in the question. – nnnnnn Apr 18 '12 at 23:18
  • Then the problem is somewhere else. He is using relative paths, to include the library itself, so the inclusion might fail. –  Apr 18 '12 at 23:21
  • @AlexFl thanks for providing this add class solution. May I know why it is not recommended to change id names? – TTT Apr 20 '12 at 19:12
  • By default, and id specifies that an element is unique and the DOM is created in that way. By default, Javascript uses that. So basically you have an unique element with a unique id. Now you are trying to remove your own definition which is bad practice. Probably not gonna change anything in any of the latest browsers and javascript libraries, but in theory you are "outside the rules", to put it this way. I'm pretty sure it has implications in practice as well, it's just that modern browsers are really smart(Internet Explorer is not a browser, it tries but fails) and that "allows" some errors. –  Apr 20 '12 at 19:56
  • 1
    Instead of that, your element can have a unique id if it needs one and then a javascript trigger class which you can remove and add as you please. You still need to use $('.myclass').on("click", function(event){}); to implement event delegation instead of just .click(function(){}); but this allows for far more greater flexibility while "playing by the rules". –  Apr 20 '12 at 19:58
2

Personally I feel like the fact that jQuery doesn't have a specific setter method for the Id is very much intentional because you shouldn't be changing Ids around. Is there any reason you're not using classes? jQuery has a lot of useful functions and selectors for managing those with respect to an element and they can be used as both unique identifiers and group identifiers.

Spencer Ruport
  • 34,865
  • 12
  • 85
  • 147
  • 4
    Why shouldn't you be changing ids around? Even accepting that you "shouldn't", the fact is you _can_, so how does this answer the question? – nnnnnn Apr 18 '12 at 23:15
  • 1
    I've been visiting Q&A sites for a while now and one thing I've learned is that sometimes the best answer is "You're asking the wrong question." That said, even if he's determined to keep using Ids someone else may not be. Stackoverflow is supposed to be a reference just as much as a Q&A site and my answer may be the best answer for someone else later on. – Spencer Ruport Apr 18 '12 at 23:32
  • 2
    I agree that "You're asking the wrong question" is a valid answer in general, and that in this case there may well be a better way to do whatever the underlying requirement is. But on the other hand the code as shown should work, that is, it should change the id - the reason it doesn't must be due to something not shown. So I guess what I'm saying is that a complete answer would address that (with bonus points for suggesting a better alternative). – nnnnnn Apr 19 '12 at 00:26
  • People like me? Thanks for that. For what it's worth I certainly don't expect flawless answers, and I didn't intend to imply otherwise. My apologies for the negative vibe of my original comment. – nnnnnn Apr 19 '12 at 02:07
  • This is an old post but I can think of 1 very valid reason to change an element's ID: SaaS testing an A/B test swapping sidebar left/right without re-writing many lines of CSS such as `#left-bar + #main-content + #right-bar`. This is correct because one of the ID's for *-bar doesn't render by default, and it's also correct because the ID needs to change. As you can see this violates how JS best practices are "suppost to work" under common cases....but it's correct and valid use. Sure I could re-invent the wheel, class sidebars, write new CSS.......but why? No point wasting time. – dhaupin Apr 11 '16 at 15:23
  • @dhaupin - I suppose it's a matter of perspective. Perverting the DOM for the sake of styling conventions seems backwards to me. You're relying on an undefined behavior to be consistent across browsers. – Spencer Ruport May 07 '16 at 16:46
  • An example of instance where acceptable would be using a template engine where you have a templated DOM element that you set an ID on as the element is inserted/appended. – Ryan Rentfro Jul 09 '18 at 04:08