由多個類之一查找重複

Question

我有多個類（品牌和顏色）類似的div：

<div id="pad"> 
    <div class="bmw white"> </div> 
    <div class="porsche yellow"> </div> 
    <div class="porsche red"> </div> 
    <div class="bmw white"> </div> 
    <div class="bmw blue"> </div> 
    <div class="bmw white"> </div> 
</div> 

<div id="same"></div> 

當我需要知道我有多少重複的品牌在#pad我用這個代碼：

function sameCars() { 
    var elems = $("#pad div").length; 
    var brands = ['bmw', 'porsche']; 
    for (var i=0; i<brands.length; i++) { 
     var k = 0; 
     for (var j=0; j<elems; j++) { 
      var mainDiv = document.getElementById('pad'), 
       childDiv = mainDiv.getElementsByTagName('div')[j]; 
      if(childDiv.className.split(' ')[0] == brands[i]) { 
       k = k+1; 
      } 
     } 
     addiv = document.getElementById("same"); 
     addiv.innerHTML += brands[i] + ": " + k; 
    } 
} 

現在，我想在我的代碼更改：

1）找到的所有類副本（可能有多個類，第一種是BR第二個是顏色等）如寶馬：4，保時捷：2，白色：3，黑色：3，轎車：2，轎跑車：3

2）不使用品牌，顏色列表等等。我不想列出所有可能的顏色或汽車品牌的長列表。剛剛得到的類名

3）色彩讓我的代碼更短，更優雅

Answer 1

你只需要動態地收集所有類拳頭：

$(document).ready(function() { 
 
    var duplicates = {}; 
 
    var $pad = $('#pad'); 
 

 
    $('#pad > div').each(function() { 
 
    var classes = $(this)[0].classList; 
 

 
    for (var i = 0; i < classes.length; i++) { 
 
     if (typeof duplicates[classes[i]] === 'undefined') { 
 
     duplicates[classes[i]] = 1; 
 
     } else { 
 
     duplicates[classes[i]]++; 
 
     } 
 
    } 
 
    }); 
 
    
 
    for (var j in duplicates) { 
 
    $pad.append('<div>'+j+':'+duplicates[j]+'</div>'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pad"> 
 
    <div class="bmw white"> </div> 
 
    <div class="porsche yellow"> </div> 
 
    <div class="porsche red"> </div> 
 
    <div class="bmw white"> </div> 
 
    <div class="bmw blue"> </div> 
 
    <div class="bmw white"> </div> 
 
</div> 
 

 
<div id="same"></div>

Answer 2

JavaScript示例（沒有的jQuery需要）

var parentWrapper = document.getElementById('pad'); 
var displayWrapper = document.getElementById('same'); 
var classesList = getUniqueClassList(parentWrapper); 
displayCounts(classesList); 

function displayCounts(list) { 
    for (var className in list) { 
    var number = list[className]; 
    displayWrapper.innerHTML += className + ' ' + number + '<br>'; 
    } 
} 

function getUniqueClassList(wrapper) { 
    var list = {}; 
    for (var elem of wrapper.getElementsByTagName('div')) { 
    for (var cssClass of elem.classList) { 
     if (!list[cssClass]) { 
       list[cssClass] = 1; 
     } else { 
     list[cssClass]++; 
     } 
    } 
    } 
    return list; 
} 

小提琴https://fiddle.jshell.net/r1rk1xL3/5/

Answer 3

您可以使用jquery動態獲取類並應用邏輯來獲得像這樣的唯一計數。

sameCars(); 
 
function sameCars() { 
 
    var brands = []; 
 
    var colors = []; 
 
    $("#pad div").each(function(){ 
 
     brands.push($(this).attr("class").split(' ')[0]) 
 
     colors.push($(this).attr("class").split(' ')[1]) 
 
    }); 
 
    //console.log(brands) 
 
    //console.log(colors) 
 
    var cars_count = {}; 
 
    $.each(brands, function(index, value) { 
 
     cars_count[value] = cars_count[value] + 1 || 1; 
 
    }); 
 
    console.log("Unique cars count :") 
 
    console.log(cars_count); 
 
    
 
    var count_color = {}; 
 
    $.each(colors, function(index, value) { 
 
     count_color[value] = count_color[value] + 1 || 1; 
 
    }); 
 
    console.log("Unique Colors count :") 
 
    console.log(count_color); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="pad"> 
 
    <div class="bmw white"> </div> 
 
    <div class="porsche yellow"> </div> 
 
    <div class="porsche red"> </div> 
 
    <div class="bmw white"> </div> 
 
    <div class="bmw blue"> </div> 
 
    <div class="bmw white"> </div> 
 
</div> 
 

 
<div id="same"></div>

Answer 4

這裏得到你想要的東西的一個很好的方式。 注意我不操縱DOM，我會留給你。

function classIsDup(className, setOfClasses) 
{ 
    return (setOfClasses.indexOf(className) > -1); 
} 

function getDuplicates() 
{ 
    var setOfClasses = []; 
    var listOfDuplicates = []; 
    $('#pad').children('div').each(function(index) { 

     if(classIsDup($(this).attr('class'), setOfClasses)) 
     { 
      listOfDuplicates.push($(this).attr('class')); 
     } 
     else 
     { 
      setOfClasses.push($(this).attr('class')); 
     } 
    }); 
    // just in case dups exist within the list of dups 
    $.uniqueSort(listOfDuplicates); 
} 

getDuplicates();