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

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

本文关键字：列表 jQuery 单独 无序 使用 查找      更新时间：2023-09-26

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

提前感谢!

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/

试试这样做:

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

您可以在这里找到代码: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
        }
    })
})

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

//查找从最快的方式来检测重复条目是否存在于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");
            }
        }
    }
}

尼克斯回答的稍微不那么冗长的变体:

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