如何计算具有特定类jquery的元素

时间:2017-04-24 05:36:49

标签: javascript jquery

我有类似@ManyToOneCourseList等类的元素。当dis_5部分在数字更改时保持不变。我想用每个dis数来计算元素,例如,如果3个元素有dis_5类,则计数元素。同样对其他人而言也是如此。

dis_3

如何在最后将具有特定数字的元素捆绑在一起。

7 个答案:

答案 0 :(得分: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;

答案 1 :(得分:2)

试试这个,

user.manager?

<强>代码段,

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

答案 2 :(得分:2)

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>

答案 3 :(得分:1)

试试这个。希望这有帮助

  
  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>

答案 4 :(得分:1)

您可以Array.from()使用$("[class*='dis_']")作为参数Array.prototype.reduce(),在第二个参数中使用Map的普通对象,将"dis_N"设置为对象的属性值设置为匹配的.className RegExp /dis_\d+/,也会传递到jQuery()调用连接到".".length链接。{ / p>

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>

答案 5 :(得分:1)

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

答案 6 :(得分:-4)

使用Jquery .length将返回所选元素的计数