如何使用jQuery计算特定类别的元素数量

Question

我有一些带有类名为dis_5和dis_3的元素。这里dis_部分保持不变，而数字会改变。我想计算每个dis数字的元素数量，例如如果有3个元素具有dis_5类，则计数元素。同样地，对于其他的dis_也是如此。

var result = $('[class^=dis_]').filter(function () {
            return this.class.match(/dis_\d+$/); //regex for the pattern "rank_ followed by a number"
    });

如何捆绑末尾带有特定数字的元素。

- smarttechy

---

jQuery对象具有一个长度。 - Jaromanda X

我知道长度是用来计数的......如何获取元素？ - smarttechy

你说过“类似于类”，但你正在搜索和解析ID，而不是类。 - T.J. Crowder

将计数合并在一起...总数或个别计数 - 如 var result = Array.from($('[class^=dis_]')).map(e => e.className.match(/dis_\d+$/)).reduce((result, num) => (result[num] = (result[num] || 0) + 1, result), {}); - Jaromanda X

@guest271314 - 不，不是这样的 - 为什么不让你展示一下你会怎么做呢？ - Jaromanda X

Answer 1

jQuery(document).ready(function(){
  var classString = "";
  jQuery('[class^=dis_]').each(function(){
   var classData = jQuery(this).attr("class");
   var ClassDataChunk = classData.split("_");
   var classChunk = ClassDataChunk[1];
   var elmVal = jQuery("#elm").val();
   if (elmVal.indexOf(classChunk) < 0) {
    alert("Class dis_"+classChunk+" has count = " +jQuery(".dis_"+classChunk).length);
   }
   classString = classString + "," + classChunk;
   jQuery("#elm").val(classString);
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="hidden" value="" name="elm" id="elm">
<div class="container">
 <div class="dis_3">3</div>
 <div class="dis_1">1</div>
 <div class="dis_1">1</div>
 <div class="dis_1">1</div>
 <div class="dis_1">1</div>
 <div class="dis_2">2</div>
 <div class="dis_2">2</div>
 <div class="dis_4">4</div>
 <div class="dis_3">3</div>
 <div class="dis_3">3</div>
</div>

- Manav Sharma

Answer 2

试一试这个方法：

var lengthArr = []; // array to hold your result set

var YourNumberLimit = 5; // if you class is an incremental number with prefix "dis_", like dis_1, dis_2, dis_3, dis_4, dis_5

for (i=1;i<=YourNumberLimit ; i++) {

   lengthArr.push ( $(".dis_" + i).length); // your answer is here.

}

如果您需要为单个类计算长度，则使用以下方法：

var lenthOfDis3 = $(".dis_5").length;
var lenthOfDis5 = $(".dis_5").length;
var lenthOfDis7 = $(".dis_5").length;
var lenthOfDis18 = $(".dis_5").length;

- Sarin Jacob Sunny

---

我想要单独计算类，例如所有的dis_2一起计算，所有的dis_17一起计算，而且末尾的数字没有限制。 - smarttechy

然后针对每个标签单独使用，像这样。var LengthDis5 = $(".dis_5").length; - Sarin Jacob Sunny

Answer 3

请尝试以下方法：

var classes={};
$('[class^=dis_]').each(function () {
    if(classes.hasOwnProperty(this.className)){
      classes[this.className]= classes[this.className]+1;
    } else {
      classes[this.className]=1;
    }
});

片段，

var classes = {};
$('[class^=dis_]').each(function() {
  if (classes.hasOwnProperty(this.className)) { // if classs exists then increment it by 1
    classes[this.className] = classes[this.className]+1;
  } else {
    classes[this.className] = 1; // first instance
  }
});
console.log(classes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dis_1">Class 1</div>
<div class="dis_1">Class 1</div>
<div class="dis_1">Class 1</div>
<div class="dis_5">Class 5</div>
<div class="dis_5">Class 5</div>
<div class="dis_2">Class 2</div>
<div class="dis_3">Class 3</div>

如果您有多个类，则尝试以下代码片段

var classes = {};
$('[class*=dis_]').each(function() { // use *= selector, dis_ class can be used anywhere
  className = null;
  // get all classes and split to get match for dis_
  $.each($(this).attr('class').split(/\s+/), function(index, cls) {
    if (/dis_\d+/.test(cls)) {
      className = cls;
    }
  });
  // check if element having class started with dis_
  if (className) {
    if (classes.hasOwnProperty(className)) { // if classs exists then increment it by 1
      classes[className] = classes[className] + 1;
    } else {
      classes[className] = 1; // first instance
    }
  }
});
console.log(classes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dis_1">Class 1</div>
<div class="dis_1">Class 1</div>
<div class="dis_1 rehub_meta_field rehub_field_1 disabled disabled-0">Class 1</div>
<div class="dis_5">Class 5</div>
<div class="dis_5">Class 5</div>
<div class="dis_2">Class 2</div>
<div class="rehub_meta_field rehub_field_1 disabled disabled-0 dis_3">Class 3</div>

- Rohan Kumar

---

为什么你使用了 this.className？它在这里起作用，但是控制台日志为空，我不知道为什么。 - smarttechy

我的 div 有多个类 <div class="rehub_meta_field rehub_field_1 disabled disabled-0 dis_10"> - smarttechy

在这里阅读有关 className 的信息：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className - Rohan Kumar

是的，我搜索了一下。谢谢……我认为这与多个类有关。 - smarttechy

Answer 4

尝试一下。希望这有所帮助。

  
  var arrClasses = [], uniqueClass = [];
$('[class^=dis_]').each(function () {
    var className = this.className.match(/dis_\d+/); 
    if (className) {
        arrClasses.push(className[0]); 
        return className[0]; 
    }
});
$.each(arrClasses, function(i, el){
   if($.inArray(el, uniqueClass) === -1) uniqueClass.push(el);
});
$.each(uniqueClass, function(i, el){
   var classLen = $('.'+el).length;
   console.log('Class: '+ el +'--- Length: '+ classLen);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


  <body >
<div class="dis_2">1</div>
<div class="dis_2">2</div>
<div class="dis_2">3</div>
<div class="dis_5">4</div>
<div class="dis_5">5</div>
<div class="dis_3">6</div>
  </body>

- Sharmila

Answer 5

你可以使用 Array.from() 函数，以 $("[class*='dis_']") 作为参数。然后使用 Array.prototype.reduce() 函数，将一个普通对象的 Map 作为第二个参数，将 "dis_N" 作为该对象的属性名，并将值设置为与 RegExp /dis_\d+/ 匹配的 .className，同时将其与 "." 连接，通过 .length 方法链式调用传递给 jQuery() 函数。

var len = Array.from($("[class*='dis_']"))
          .reduce(function(o, el) {
            var c = el.className.match(/dis_\d+/).pop();
            o[c] = $("." + c).length;
            return o
          }, {});

console.log(len);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="abc dis_1"></div>
<div class="dis_2 def"></div>
<div class="ghi dis_2"></div>
<div class="dis_3 jkl"></div>
<div class="mno dis_4"></div>
<div class="dis_2 pqr stu v w xy z"></div>

- guest271314

Answer 6

  
$(function(){
  var classes = {};
  $('[class^=dis_]').each(function(index,item){
  var reg = /\s*dis_\w+/g;
  var className = $(item).attr('class');
  var regElements = className.match(reg);
      
  for(var i=0;i<regElements.length;i++){
    var matchClassName = $.trim(regElements[i])
    if(classes.hasOwnProperty(matchClassName)){
      classes[matchClassName] += 1;
        }else{
       classes[matchClassName] = 1;
      }
    }
    })
    console.log(classes)
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dis_1">Class 1</div>
<div class="dis_1 test">Class 1</div>
<div class="dis_1 dis_5 disable">Class 1</div>
<div class="dis_5 dis_2">Class 5</div>
<div class="dis_5">Class 5</div>
<div class="dis_2">Class 2</div>
<div class="">Class 3</div>

- lanlan.zheng

Answer 7

使用 jQuery 的 .length 方法可以返回所选元素的数量。

- Vishwash Singh