CODEWITHSUNDEEP
javascriptjquery
S.M_Emamian
S.M_Emamian

Reputation: 17383

Counting the number of elements with the same class- jquery

I have an ul element. now I would like to know how many of li's have selected class . 

<ul class="icon-list icon-list-inline star-rating" id="star-rating">

        <li class="selected"></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
</ul>


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

it must return 1 .

Upvotes: 4

Views: 1059

Answers (4)

satwik
satwik

Reputation: 607

Check this,

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

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191976

Use child selector with class:

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

alert(vote_selected);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="icon-list icon-list-inline star-rating" id="star-rating">
  <li class="selected"></li>
  <li class=""></li>
  <li class=""></li>
  <li class="selected"></li>
  <li class=""></li>
</ul>

Upvotes: 6

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

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;

Or

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

Upvotes: 6

guradio
guradio

Reputation: 15555

alert($('#star-rating li.selected').length)//use selector li.selected
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="icon-list icon-list-inline star-rating" id="star-rating">

        <li class="selected"></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
        <li class=""></li>
</ul>

Use selector ex. li.classname

Upvotes: 1

Related Questions