Use jQuery to find list items with matching class names in separate unordered lists

Question

I have two unordered lists, each filled with list items that have a DYNAMIC class name. When I say "dynamic" I mean they are not generated by me, but they don't change once the lists have been created. These class names are id's I'm getting from an API, so they're just random numbers. A simple example would be something like...

<ul class="listA">
  <li class="123"></li>
  <li class="456"></li>
  <li class="789"></li>
</ul>

<ul class="listB">
  <li class="789"></li>
  <li class="101"></li>
  <li class="112"></li>
</ul>

What I'm trying to do is compare the two lists, and have any matches be highlighted, in this case the items with the class "789" would match. When I say highlighted, I just mean I'll probably apply some css after a match is found, like maybe a background color or something (not too important yet). The problem really lies in the fact that the lists can be somewhat long (maybe 50 items) and the classes are just random numbers I don't choose, so I can't do any specific searches. Also, there will most likely be cases with multiple matches, or no matches at all.

I'm pretty new to jQuery, so there may be a fairly simple answer, but everything I find online refers to searching by a specific class, such as the .find() method. If anyone needs more info or a better example, I'll be happy to give more info, I'm just trying to keep it simple now.

Thanks so much in advance!

Answer 1

var $first  = $('ul.listA li'),
    $second = $('ul.listB li');

$first.each(function(){
    var cls = this.className,
        $m  = $second.filter(function(){
            return this.className === cls;
        });

    if ($m.length) {
      $(this).add($m).addClass('matched');
    }
});

http://jsfiddle.net/b4vFn/

Answer 2

Try it this way:

    $("ul.listA li").each(function(){
         var listAval = $(this).attr('class');
         $("ul.listB li").each(function(){
            if(listAval == $(this).attr('class')){
              //matched..
              return false; //exit loop..
            }
         }
    }

Answer 3

A slightly less verbose variant of Nix's answer:

$("ul.listA li").each(function(){
    var a = $("ul.listB li").filter("." + $(this).attr('class'));
    if (a.size()) {
        a.add($(this)).css("background", "red");
    }
});

Answer 4

you can find the code here: jsFiddle

var listA=$('.listA li')
var listB=$('.listB li')

listA.each(function(){
    var classInA=$(this).attr('class');
    listB.each(function(){
        var classInB=$(this).attr('class');
        if(classInA === classInB){
             console.log(classInA);
             //now you found the same one
        }
    })
})

Answer 5

Demo at http://jsfiddle.net/habo/kupd3/

   highlightDups();

   function highlightDups(){
    var classes = [] ;
    $('ul[class^="list"]').each(function(k,v){
        //alert(v.innerHTML);
        $($(this).children()).each(function(nK,nV){
           // alert($(this).attr("class"));
            classes.push($(this).attr("class"));
        });
    });
        hasDuplicate(classes);
    }

//Find duplicate picked from fastest way to detect if duplicate entry exists in javascript array?

function hasDuplicate(arr) {
    var i = arr.length, j, val;
    while (i--) {
        val = arr[i];
        j = i;
        while (j--) {
            if (arr[j] === val) {
 // you can write your code here to handle when you find a match
                $("."+val).text("This is Duplicate").addClass("match");
            }
        }
    }
}