jQuery - Add ID instead of Class

Question

I'm using the current jQuery:

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').addClass($(this).text());
        $('#container').addClass($(this).text());
        $('.stretch_footer').addClass($(this).text())
        $('#footer').addClass($(this).text());
    });
});

It applies the text held in the breadcrumb to 4 elements on the page, allowing me to style specifically to the page there on.

I'd like to try adding an ID instead of a class, how can I achieve this?

An ID must be unique to be valid XHTML. An ID must match tighter rules, e.g., no spaces, start with letter or _, only contain letters, numbers or a limited number of other characters. — Doug Domeny, Feb 01 '10 at 14:03
@Peter: adding a link to wikipedia seems a little redundant. — nickf, Feb 03 '10 at 05:40
Possible duplicate of [Adding attribute in jQuery](https://stackoverflow.com/questions/5995628/adding-attribute-in-jquery) — Makyen, Oct 05 '18 at 21:42
See also [addID in jQuery?](https://stackoverflow.com/q/1657702/6353323) — Lazerbeak12345, May 11 '20 at 14:28
In doing this you must also use a unique id for each element in the DOM or it will produce invalid HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id — Mark Schultheiss, Jan 05 '21 at 20:34

score 263 · Accepted Answer · edited Dec 09 '15 at 03:39

263

Try this:

$('element').attr('id', 'value');

So it becomes;

$(function() {
    $('span .breadcrumb').each(function(){
        $('#nav').attr('id', $(this).text());
        $('#container').attr('id', $(this).text());
        $('.stretch_footer').attr('id', $(this).text())
        $('#footer').attr('id', $(this).text());
    });
});

So you are changing/overwriting the id of three elements and adding an id to one element. You can modify as per you needs...

edited Dec 09 '15 at 03:39

gsamaras

71,951
46
188
305

answered Feb 01 '10 at 13:40

Sarfraz

377,238
77
533
578

1

How about caching? Rather than making 4 different jQuery objects of "this". var text = $(this).text(); – PetersenDidIt Feb 01 '10 at 13:56
@petersendidt: agreed, i said in my answer, that he needs to modify as per needs. – Sarfraz Feb 01 '10 at 14:01
even better: `$('#nav, #container, .stretch_footer, #footer').attr('id', $(this).text());` .. not that using an ID here is a good idea. – nickf Feb 03 '10 at 05:39
This will only work once, after which the ID changes... also, you keep overriding the same IDs, so you might as well do it for `$('#nav, #container, .stretch_footer, #footer').attr('id', $('span .breadcrumb:first').text())` (or `last`, for `.stretch_footer`). Anyway, this is weird. – Kobi Feb 03 '10 at 05:44
This creates multiple elements with the same ID which is invalid HTML – Mark Schultheiss Jan 05 '21 at 20:30

Anthony · Answer 2 · 2015-11-13T06:00:22.190

28

Keep in mind this overwrites any ID that the element already has:

 $(".element").attr("id","SomeID");

The reason why addClass exists is because an element can have multiple classes, so you wouldn't want to necessarily overwrite the classes already set. But with most attributes, there is only one value allowed at any given time.

edited Nov 13 '15 at 06:00

answered Feb 01 '10 at 13:42

Anthony

36,459
25
97
163

score 13 · Answer 3 · answered Feb 01 '10 at 13:39

13

$('selector').attr( 'id', 'yourId' );

answered Feb 01 '10 at 13:39

meouw

41,754
10
52
69

geekbuntu · Answer 4 · 2012-09-21T14:15:34.780

3

if you want to 'add to the id' rather than replace it

capture the current id first, then append your new id. especially useful for twitter bootstrap which uses input states on their forms.

    new_id = '{{old_id}} inputSuccess';
    old_id = that.attr('id');
    that.attr('id', new_id.replace( /{{old_id}}/ig,old_id));

if you do not - you will lose any properties you previous set.

hth,

edited Sep 21 '12 at 14:15

answered Sep 21 '12 at 13:45

geekbuntu

851
6
4

A valid element can only have a single id. https://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids – colonelclick May 02 '20 at 19:01

score 3 · Answer 5 · answered Nov 12 '12 at 11:24

Im doing this in coffeescript

booking_module_time_clock_convert_id = () ->
  if $('.booking_module_time_clock').length
    idnumber = 1
    for a in $('.booking_module_time_clock')
      elementID = $(a).attr("id")
      $(a).attr( 'id', "#{elementID}_#{idnumber}" )
      idnumber++

jQuery - Add ID instead of Class

5 Answers5

Linked