I know its bad, I know ID is unique and I need to fix it on massive scale on some set of pages.

I dont know what are those ID, I only know class of it, so is it possible to somehow do

$('.someClass').itemsThatHasIdDuplicate().each(function(){
    $(this).attr('id', Math.random()); //its stupid to use random for ID, but shows what I mean
});

ps. I've found this, but this assumes that you know what the ID is.

I know its bad, I know ID is unique and I need to fix it on massive scale on some set of pages.

I dont know what are those ID, I only know class of it, so is it possible to somehow do

$('.someClass').itemsThatHasIdDuplicate().each(function(){
    $(this).attr('id', Math.random()); //its stupid to use random for ID, but shows what I mean
});

ps. I've found this, but this assumes that you know what the ID is.

• javascript
• jquery
• html

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Oct 25, 2013 at 7:33 Adam PietrasiakAdam Pietrasiak 13.2k1010 gold badges8181 silver badges9696 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can do this using the .attr( attributeName, function(index, attr) ):

// Get all the items with Duplicate id
var $itemsThatHasIdDuplicate = $('[id]').filter(function () {
    return $('[id="' + this.id + '"]').length > 1;
});

// Modify the id for all of them
$itemsThatHasIdDuplicate.attr('id', function (i, val) {
    return 'newID' + (i + 1);
});

Demo: Fiddle

First of all add some class to all the element having same id.

$('[id]').each(function(){
  var ids = $('[id="'+this.id+'"]');
  if(ids.length>1 && ids[0]==this){
    $('#'+this.id).addClass('changeID');
}
});

and then change the id of all the element having that class...

$('.changeID').each(function(){
$(this).attr("id","changed_"+Math.random());
}

FYI: I would suggest you picking date time for assigning id rather than using math.random()

What you can do is iterate over all elements of that class and group those elements with the same ID. Then modify those groups with more than one element:

var IDs = {};   
var idModifier = function(index, id) {
    return id + index;
};

$('.someClass').each(function() {
    (IDs[this.id] || (IDs[this.id] = [])).push(this);
});

$.each(IDs, function(id, elements) {
    if (elements.length > 1) {
        $(elements).prop('id', idModifier);
    }
});

The "advantage" of this method is that you are searching the document only once, at the beginning with $('.someClass').

You have to make sure you don't overwrite the original ID

var cls = 'foo';
$('.' + cls).each(function() {
    var me = this;
    var id = $(me).attr('id');
    var dupes = $('#' + id + '.' + cls);
    dupes.each(function() {
        if(this != me) {
            $(this).attr('id', id + '_r_' + Math.random());
        }
        else {
            $(this).attr('id', id + '_o');
        }
    });
});

This way you also know what the first instance of each ID is.

http://jsfiddle/g2DWR/1/

Edit: also, in a plugin form so you can chain it $('.foo').fixDupes().css('color', 'red');