Javascript 通过多个类中的一个查找重复项

我有多个类别（品牌和颜色）的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;
    }
}

函数sameCars（）{
变量元素=$（“#pad div”）.长度；
var品牌=[“宝马”、“保时捷”]；
对于（var i=0；i您只需动态收集所有类的拳头：


$（文档）.ready（函数（）{
var duplicates={}；
变量$pad=$（“#pad”）；
$（'#pad>div'）。每个（函数（）{
var classes=$（this）[0]；
对于（var i=0；i


Javascript示例（无需jquery）

var parentWrapper=document.getElementById（'pad'）；
var displayWrapper=document.getElementById（'same'）；
var classesList=getUniqueClassList（parentWrapper）；
显示计数（classesList）；
函数显示计数（列表）{
for（列表中的变量className）{
变量编号=列表[类名]；
displayWrapper.innerHTML+=className+''+number+'
'；
}
}
函数getUniqueClassList（包装器）{
var list={}；
for（wrapper.getElementsByTagName（'div'）的var元素）{
for（元素类列表的变量cssClass）{
如果（！列表[cssClass]）{
列表[cssClass]=1；
}否则{
列表[cssClass]++；
}
}
}
退货清单；
}

Fiddle
您可以使用jquery动态获取类，并应用逻辑来获取这样的唯一计数


sameCars（）；
函数sameCars（）{
var brands=[]；
var颜色=[]；
$（“#pad div”）。每个（函数（）{
brands.push（$（this.attr（“class”）.split（“”）[0]）
colors.push（$（this.attr（“class”）.split（“”）[1]）
});
//控制台日志（品牌）
//console.log（颜色）
var cars_count={}；
美元。每个（品牌、功能（指数、价值）{
汽车数量[价值]=汽车数量[价值]+1 | | 1；
});
console.log（“唯一车辆计数：”）
控制台日志（车辆计数）；
var count_color={}；
$.each（颜色、功能（索引、值）{
计数颜色[值]=计数颜色[值]+1 | | 1；
});
log（“唯一颜色计数：”）
控制台日志（计数颜色）；
}
这是一种很好的获取所需内容的方法。注意我不操纵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();

你到底想要什么和2）.3）不是必要的你想摆脱为这类汽车创建数组吗？你有什么超过2种类型的类？如果你有
白色宝马
和
红色宝马
，或者更好的
大白宝马
和
白色宝马四门
？@Justinas方法getUniqueClassList将t的位置作为第二个参数他想要类别，因为正如你所说的，你可能想为另一个属性设置第三个类别，你只需传递目标类别的正确索引即可。显然，因为你想动态获取品牌、颜色的列表，你需要始终将类别设置为相同的顺序。如果存在某些类别，也不可能始终为类别设置相同的顺序省略的类，你仍然必须放入一些空白/非样式的类，只是为了你的代码维护…非常糟糕的想法来自Eduardo的假设回答：你的类必须始终保持相同的顺序，创建新的类组需要你的代码修改。这是正确的！但是根据HTML结构，我们甚至不能假设哪一个是车名和颜色名。他应该在dom元素中使用一些HTML属性，如数据车名、数据颜色名。为什么？它有不同的颜色，这就是拥有不同类所需要的一切。@Justinas我认为Mayank的意思是，他可能需要根据您的要求分别显示唯一的颜色列表和唯一的车列表如果不能对这些类进行随机排序，您将无法将颜色列表和品牌列表分开（这是我在第一个建议中的意图）。
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;
}

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