5

我有两个无序列表，每个列表都填充了具有 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() 方法。如果有人需要更多信息或更好的例子，我很乐意提供更多信息，我现在只是想保持简单。

提前非常感谢！

4

5 回答 5

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

于 2013-05-08T03:10:23.457 回答
4

试试这种方式：

    $("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..
            }
         }
    }
于 2013-05-08T03:04:22.897 回答
0

Nix 回答的稍微不那么冗长的变体：

$("ul.listA li").each(function(){
    var a = $("ul.listB li").filter("." + $(this).attr('class'));
    if (a.size()) {
        a.add($(this)).css("background", "red");
    }
});
于 2013-05-08T03:10:54.883 回答
0

你可以在这里找到代码：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
        }
    })
})
于 2013-05-08T03:11:27.060 回答
0

演示在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");
            }
        }
    }
}
于 2013-05-08T03:19:34.187 回答