如何在jQuery中获得相同命名的最大类元素长度？

Question

我可以很容易地找到与此代码具有相同类名长度的元素，

var classLength = $('.floor-4').length;

但是，如何动态地获得具有相同类名长度的元素？

以下是我的html代码：

<div id="demo">
  <div class="floor floor-1" data-floor="5" data-floor-sub="0">
    <span class="text">Floor 1</span>
  </div>
  <div class="floor floor-2" data-floor="5" data-floor-sub="1">
    <span class="text">Floor 2</span>
  </div>
  <div class="floor floor-3" data-floor="1" data-floor-sub="2">
    <span class="text">Floor 33</span></div>
  <div class="floor floor-3" data-floor="2" data-floor-sub="2">
    <span class="text">Floor 33</span>
  </div>
  <div class="floor floor-3" data-floor="3" data-floor-sub="2">
    <span class="text">Floor 31</span>
  </div>
  <div class="floor floor-3" data-floor="4" data-floor-sub="2">
    <span class="text">Floor 31</span>
  </div>
  <div class="floor floor-3" data-floor="5" data-floor-sub="2">
    <span class="text">Floor 32</span>
  </div>
  <div class="floor floor-3" data-floor="6" data-floor-sub="2">
    <span class="text">Floor 33</span>
  </div>
  <div class="floor floor-3" data-floor="7" data-floor-sub="2">
    <span class="text">Floor 33</span>
  </div>
  <div class="floor floor-3" data-floor="8" data-floor-sub="2">
    <span class="text">Floor 33</span>
  </div>
  <div class="floor floor-3" data-floor="9" data-floor-sub="2">
    <span class="text">Floor 33</span>
  </div>
  <div class="floor floor-4" data-floor="0" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="1" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="2" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="3" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="4" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="5" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="6" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="7" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="8" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="9" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-4" data-floor="10" data-floor-sub="3">
    <span class="text">Floor 4</span>
  </div>
  <div class="floor floor-5" data-floor="4" data-floor-sub="4">
    <span class="text">Floor 5</span>
  </div>
  <div class="floor floor-5" data-floor="5" data-floor-sub="4">
    <span class="text">Floor 5</span>
  </div>
  <div class="floor floor-5" data-floor="6" data-floor-sub="4">
    <span class="text">Floor 5</span>
  </div>     
</div>

Answer 1

像这样，这将返回最常见类的类名，或者如果它们相同(如果有两个类具有相同的最大值)，则返回第一个类：

function getMaxFloorClass(){
    var groups = {}, max = 0, maxClass;
    $(".floor").each(function(i, item){
        var classname = $(item).attr('class');
        groups[classname] = groups[classname] || 0;
        groups[classname]++;
    });

    for(group in groups){
        if(groups[group] > max){
            maxClass = group;
            max = groups[group];
        }
    }
    return maxClass;
}

工作实例：

https://jsfiddle.net/kvycjh19/2/

Answer 2

您可以使用一个函数对其进行抽象，该函数可以从类名或类选择器(前面的点)返回该类的元素数：

var classCount = function(classString){
    return document.getElementsByClassName(class).length;
};

var countClass = function(classSelector){
    return document.querySelectorAll(classSelector).length;
};

如果您希望使用自定义的jQuery方法，那么：

jQuery.fn.classCount = function(classString){
    return $(classString).length;
};