jquery: find common elements in 2 sets of divs

Question

For a markup like this:

<div id="set1">
 <div id="100">a div</div>
 <div id="101">another div</div>
 <div id="102">another div 2</div>
 <div id="120">same div</div>
</div>  

<div id="set2">
 <div id="105">a different div>
 <div id="101">another div</div>
 <div id="110">more divs</div>
 <div id="120">same div</div>
</div>

As you can see both #set1 and #set2 contain 2 divs with the same id (101, 120). Is it possible somehow with jQuery to find the common elements and add a class to the divs in #set1 that have the same id with divs in #set2?

In other words after the script run the above code would look like this:

<div id="set1">
 <div id="100">a div</div>
 <div id="101" class="added">another div</div>
 <div id="102">another div 2</div>
 <div id="120" class="added">same div</div>
</div>  

<div id="set2">
 <div id="105">a different div>
 <div id="101">another div</div>
 <div id="110">more divs</div>
 <div id="120">same div</div>
</div>

EDIT playing around with it i did something but i am not sure it can go anywhere. I created an array with the ids in both sets and in Firebug i can see an array with the values

 var arrEl = [];
   $('#set1 div, #set2 div').each( function(index) {
    var id = $(this).attr('id');            
    arrEl.push(id);

 //maybe somehow check the array for the values that appear twice, and add the class to the //matching divs?
   });

Answer 1

IDs should never be duplicated within the same document, it breaks the spec and jQuery will only ever select the first occurence in the document whenever the ID selector (e.g. '#foo') is called. Furthermore, results will be inconsistent across different browsers. I would suggest using a custom attribute (or $.data) to store those reference numbers.

A custom attribute looks like this:

<div id="foo" custom="test">Hello</div>

You can get the value of custom like this:

alert($("#foo").attr("custom"));

Answer 2

Go through set1 in a loop and for each div, see if there is a matching one in set2:

var set2 = $("#set2");
var set1Divs = $("div", $("#set1));

for( var i = 0; i < set1Divs.size(); i++ )
{
    var div = set1Divs[i];
    var divId = div.attr( "id" );
    if ( set2.find( "#" + divId ).size() > 0 ) {
        div.addClass( "added" );
    }
}

Answer 3

Given your comment that you're going to use rel instead of id, this way creates arrays (using map()) of each set, storing the value of rel, and compares them.

var set1 = $('#set1').children().map(function() {
    return $(this).attr('rel');
}).get();

var set2 = $('#set2').children().map(function() {
    return $(this).attr('rel');
}).get();

for(var i in set1) {
    if(set1[i] == set2[i])
        $('#set1').children().eq(i).addClass('added')
}

---

EDIT:

Or perhaps better (shorter anyway), try this:

$('#set2 > div').each(function(){
    $('[rel=' + $(this).attr('rel') + ']', '#set1').addClass('added')
});

Answer 4

Is that really your markup? It would be invalid HTML to have elements with the same ids.

Anyway, I suppose you could loop through all divs in set1 and check if they exist in set2:

var $set2 = $('#set2');
var $duplicates = $.grep($('#set1 > div'), function(el) {
  return $set2.children('#' + el.id).length > 0;
});
$($duplicates).addClass('added');

See this in action here: http://jsfiddle.net/DDtQU/

Answer 5

even if your code is not gonna be valid, and that it is a very bad practice to have duplicate ID's and using numbers as ID's you can use this code. But don't tell anyone i wrote it :P

var campareTo = $("div#set1 > div") 
var original = $("div#set2 > div")

original.each(function(o, i){
   var tempID = $(this).attr("id")
   if (compareTo.filter("#" + tempID).length){
     compareTo.filter("#" + tempID).addClass('added')
   }
})

test it here: http://jsfiddle.net/DDtQU/1/