Utilizzare jQuery per trovare voci di elenco con nomi di classi corrispondenti in elenchi non ordinati separati

Question

Ho due elenchi non ordinati, ciascuno riempito con voci di elenco con un nome di classe DYNAMIC. Quando dico "dinamico" intendo che non sono generati da me, ma non cambiano una volta che le liste sono state create. Questi nomi di classe sono ID che ottengo da un'API, quindi sono solo numeri casuali. Un semplice esempio potrebbe essere qualcosa di simile ...

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

Quello che sto cercando di fare è confrontare le due liste, e hanno tutte le corrispondenze evidenziate, in questo caso gli oggetti con la classe "789" sarebbe partita . Quando dico evidenziato, voglio solo dire che probabilmente applicherò dei css dopo aver trovato una corrispondenza, come forse un colore di sfondo o qualcosa (non troppo importante ancora). Il problema sta nel fatto che le liste possono essere piuttosto lunghe (forse 50 voci) e le classi sono solo numeri casuali che non scelgo, quindi non posso fare ricerche specifiche. Inoltre, molto probabilmente ci saranno casi con più corrispondenze o nessuna corrispondenza.

Sono abbastanza nuovo di jQuery, quindi potrebbe esserci una risposta abbastanza semplice, ma tutto ciò che trovo online si riferisce alla ricerca di una classe specifica, come ad esempio il metodo .find(). Se qualcuno ha bisogno di più informazioni o di un esempio migliore, sarò felice di dare ulteriori informazioni, sto solo cercando di renderlo semplice ora.

Grazie mille in anticipo!

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

Prova in questo modo:

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

Una variante un po 'meno verboso della risposta di 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

è possibile trovare il codice qui: 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 a 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 raccolte da 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"); 
      } 
     } 
    } 
}