Użyj jQuery, aby znaleźć elementy listy z odpowiednimi nazwami klas w oddzielnych nieuporządkowanych listach.

Question

Mam dwie nieuporządkowane listy, z których każda zawiera elementy listy, które mają nazwę klasy DYNAMIC. Kiedy mówię "dynamiczny", mam na myśli, że nie są generowane przeze mnie, ale nie zmieniają się po utworzeniu list. Te nazwy klas są identyfikatorami otrzymywanymi z interfejsu API, więc są po prostu liczbami losowymi. Prosty przykład byłoby coś ...

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

Co staram się zrobić to porównać dwie listy i mają być podświetlone wszystkie mecze, w tym przypadku elementy z klasy „789” będzie pasować . Kiedy mówię "wyróżniony", mam na myśli, że prawdopodobnie zastosuję css po znalezieniu dopasowania, jak może kolor tła lub coś (jeszcze nie ważne). Problem polega na tym, że lista może być nieco długa (może 50 elementów), a klasy są po prostu liczbami losowymi, których nie wybieram, więc nie mogę wykonywać żadnych konkretnych wyszukiwań. Ponadto najprawdopodobniej będą przypadki z wieloma dopasowaniami lub w ogóle nie będą dopasowane.

Jestem całkiem nowy dla jQuery, więc może być dość prosta odpowiedź, ale wszystko, co znajduję w Internecie, odnosi się do wyszukiwania według określonej klasy, na przykład metody .find(). Jeśli ktoś potrzebuje więcej informacji lub lepszego przykładu, z chęcią podam więcej informacji, staram się to teraz uprościć.

Dziękuję bardzo z góry!

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

Spróbuj to tak:

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

nieznacznie mniej gadatliwe wariant odpowiedzi nix za:

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

można znaleźć kod tutaj: 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 na 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); 
    } 

// odnaleźć duplikaty zbierane z 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"); 
      } 
     } 
    } 
}