使用jQuery在单独的无序列表中查找具有匹配类名的列表项

Question

我有两个无序列表，每个列表都填充了具有DYNAMIC类名的列表项。 当我说“动态”时，我的意思是它们不是由我生成的，但是一旦创建了列表，它们就不会改变。 这些类名是我从API获取的id，因此它们只是随机数。 一个简单的例子就是......

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

我要做的是比较两个列表，并突出显示任何匹配项，在这种情况下，类“789”的项目将匹配。 当我说突出显示时，我只是意味着我可能会在找到匹配后应用一些css，例如背景颜色或其他东西（不太重要）。 问题实际上在于列表可能有点长（可能是50个项目）而且类只是我不选择的随机数，因此我无法进行任何特定搜索。 此外，很可能会有多个匹配的情况，或根本没有匹配。

我对jQuery很新，所以可能有一个相当简单的答案，但我在网上找到的所有内容都是指通过特定的类进行搜索，例如.find（）方法。 如果有人需要更多信息或更好的例子，我会很乐意提供更多信息，我现在只是想保持简单。

非常感谢提前！

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

试试这种方式：

    $("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

一个稍微不那么冗长的Nix答案的变体：

$("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

你可以在这里找到代码： 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

演示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);
    }

//查找从最快方式挑选的重复以检测javascript数组中是否存在重复条目？

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");
            }
        }
    }
}