javascript - 如何在 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/