javascript - How to count elements with specific class jquery - Stack Overflow

admin管理员组

文章数量:1335094

I have elements with classes like dis_5 and dis_3 .Here the dis_ part remains same while the number changes . I want to count elements with each dis number eg if 3 elements have dis_5 class then count elements . Similarly for others dis_ also.

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

How to bundle together elements with specific number at end.

I have elements with classes like dis_5 and dis_3 .Here the dis_ part remains same while the number changes . I want to count elements with each dis number eg if 3 elements have dis_5 class then count elements . Similarly for others dis_ also.

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

How to bundle together elements with specific number at end.

• javascript
• jquery

Share Improve this question Follow edited Apr 24, 2017 at 5:42 smarttechy asked Apr 24, 2017 at 5:36 smarttechysmarttechy 90211 gold badge99 silver badges2323 bronze badges 10

• 1 the jquery object has alength – Jaromanda X Commented Apr 24, 2017 at 5:37
• I know length that's for count......How to fetch elements – smarttechy Commented Apr 24, 2017 at 5:38
• You're most of the way there (but surely you meant /dis_\d+$/ rather than /rank_\d+/?), just keep going. – T.J. Crowder Commented Apr 24, 2017 at 5:40
• You've said "classes like" but you're searching for and parsing IDs, not classes. – T.J. Crowder Commented Apr 24, 2017 at 5:42
• sorry, question was less clear before you showed your code – Jaromanda X Commented Apr 24, 2017 at 5:42

 |  Show 5 more ments

7 Answers 7

Sorted by: Reset to default 2

Try this,

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

Snippet,

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./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>

If you are having multiple classes then try the below snippet

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./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>

Try this,

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.

}

If this is not your case and you need to calculating length for induvidual classes, then use like this,

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

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./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>

Try this. Hope this helps

  
  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./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>

You can use Array.from() with $("[class*='dis_']") as parameter, Array.prototype.reduce() with plain object of Map at second parameter, to set "dis_N" as property of object with value set to the matched .className with RegExp /dis_\d+/, which is also passed to jQuery() call concatenated to ".", with .length chained.

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./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>

  
$(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./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>

Using Jquery .length will return you count of selected element

本文标签： javascriptHow to count elements with specific class jqueryStack Overflow