Jquery Counting Elements by Class - How to Implement This

jQuery counting elements by class - what is the best way to implement this?

Should just be something like:

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length

As a side-note, it is often beneficial to check the length property before chaining a lot of functions calls on a jQuery object, to ensure that we actually have some work to perform. See below:

var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
  $items.animate(/* */)
    // It might also be appropriate to check that we have 2 or more
    // elements returned by the filter-call before animating this subset of 
    // items.
    .filter(':odd')
      .animate(/* */)
      .end()
    .promise()
    .then(function () { 
       $items.addClass('all-done');
    });
}

How to count elements with specific class jquery

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

jQuery count number of divs with a certain class?

You can use the jquery .length property

var numItems = $('.item').length;

Counting the number of elements with the same class in jquery

Change the alert to this:

alert($('.capital_class').length);

Remember the event is called on a single element so this is just a single element -- you have to have jQuery query the dom after the event happens. (The first query just sets up the live handling to create the event handlers.)

Count specific elements and add count to class name using jquery

You can do

$('.full-screen').each(function(i) {
    $(this).addClass('full-screen-'+(i+1));

});

$('.full-screen').each(function(i) {    $(this).addClass('full-screen-'+(i+1));    console.log($(this)[0].outerHTML)});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="full-screen full-screen-1"></div><div class="full-screen full-screen-2"></div><div class="full-screen full-screen-3"></div><div class="full-screen full-screen-4"></div><div class="full-screen full-screen-5"></div>

jquery count the elements by class and set the another class a certain element in the list

Using jquery

var el = $('.cls');
alert(el.length); // Will alert length

To add a class to the 2nd element

$(el[1]).addClass('classOne'); // first item is 0 and second item is 1 and so on

Inside a loop to add class to 2nd element using condition.

el.each(function(i){
    if(i==1) // If 2nd item then add the class
        $(el[i]).addClass('newClass');  
});

Or this will add 'newClass' class to all elements that has class 'cls'

$('.cls').addClass('newClass');

OR this will add different classes to odd and even items in the list/matched items

$('.cls').each(function(i){
    if(!(i%2))  
        $(this).addClass('odd');
    else
        $(this).addClass('even');
});

jQUERY: Count elements which have do not have a class

You can simply filter out the non-required elements using not() function:

const elems = $(".assigned-values > .assigned-names").not(".hidden");console.log(elems.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="assigned-values">  <span class="assigned-names">          <span class="name">Test 1</span>  </span>  <span class="assigned-names hidden">          <span class="name">Test 2</span>  </span>  <span class="assigned-names hidden">          <span class="name">Test 3</span>  </span></div>

Count Dom element by class name in jQuery

Loop each tr td.
Use .attr() to get the attribute
use .length to get the number of element with class

$('table tr td[data-date]').each(function() {  var $this = $(this);


  console.log($this.attr('data-date') + " : " +    $this.find('.animal').length)})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tr>  <td>Not included td</td>    <td data-date="2017-11-10">      <div class="animal">Mouse</div>      <div class="animal">Dog</div>    </td>    <td data-date="2017-11-11">      <div class="animal">Bird</div>    </td>    <td data-date="2017-11-12">      <div class="animal">Cat</div>      <div class="animal">Horse</div>      <div class="animal">Snake</div>      <div class="animal">Tiger</div>    </td>     <td>Not included td</td>  </tr></table>

Counting the number of elements with the same class- jquery

Try this :-

var vote_selected = $('#star-rating li[class="selected"]').length;

DEMO

Or (as li is immediate descendents of #star-rating you can use >).

var vote_selected = $('#star-rating > li[class="selected"]').length;

var vote_selected = $('#star-rating > .selected').length;