jQuery select all items with same ID

Question

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.

palaѕн · Accepted Answer · 2013-10-25T07:46:52.907

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

edited Oct 25 '13 at 07:46

answered Oct 25 '13 at 07:35

palaѕн

72,112
17
116
136

It will change all elements of class, not only those that has ID duplicate. – Adam Pietrasiak Oct 25 '13 at 07:37

score 0 · Answer 2 · answered Oct 25 '13 at 07:47

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()

Felix Kling · Answer 3 · 2013-10-25T07:58:04.917

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').

Sergiu Paraschiv · Answer 4 · 2013-10-25T08:00:46.290

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.net/g2DWR/1/

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

jQuery select all items with same ID

4 Answers4