CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Blessan Kurien
Blessan Kurien

Reputation: 1665

Counting number classes from each div in jquery php

I have div with class name bus is repeated in foreach loop php

<div class="bus" id="result1">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="505" uniq-id="1452746805">
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746801">
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746823">
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746839">
  </div>
</div>

<div class="bus" id="result2">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="501" uniq-id="1452746803">
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746802">
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746804">
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746801">
  </div>
</div>
  .....
  .....
  <div class="bus" id="resultn">
     .....
     ....
  </div>

when click on a div with class seat a class green is added to it i want count the green classes in each div with class bus. Here is my code

$(document).on("click",".seat",function(){
   var total_class = $('.green').length;
})

Problem is i am getting total number of green class from all divs with class bus

UPDATE

when click on a div with class seat i want to put data-number attribute value to an array for each class bus separately,later it is used for some db operations.

Here is my code

$(document).on("click",".seat",function(){

  var temp=[];
  var seat_no = $(this).attr("data-number");
  temp.push(seat_no);

}

Problem is i am getting all the data-number attribute from from all divs with class bus

Upvotes: 1

Views: 247

Answers (6)

Jobelle
Jobelle

Reputation: 2834

$(document).ready(function () {
           $('.seat').click(function () {
           $(this).addClass('green');
          // $('#total').val($('.bus').find('div.green').length);

           szTotal = $('.bus').find('div.green').length;

           szResult = "Total no of green class in current div (id=" + $(this).closest('div.bus').attr('id') + ") = " + $(this).closest('div.bus').find('div.green').length

           szResult = szResult + "<br>" + "Total green class in All Div=" + szTotal

           alert(szResult)
       });
   });

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 531

$(document).ready(function(){
    $('.seat').click(function(){
        $(this).parent().addClass('green');
        get_number_with_class('green');
    });
});

function get_number_with_class(classname)
{
    var total_class = $('div.'+classname).length;
}

that worked for me

Upvotes: 0

Sachin
Sachin

Reputation: 1218

$(document).on("click",".seat",function(){
   var total_class = $(this).closest(".bus").find('.green').length;
})

This will give you total divs with class green in same bus

Upvotes: 0

vsogrimen
vsogrimen

Reputation: 456

Try this:

In this case

  1. you need select the parent of the element that was click which is the .bus in your case.
  2. from the parent find its children that has a class of .green and get its count

that is what I did in this code :

var total_class = $(this).parent('.bus').children('.green').length;

DEMO:

    $(document).on("click", ".seat", function() {
      $(this).addClass('green');
      var total_class = $(this).parent('.bus').children('.green').length;
      alert(total_class);
    })
.red {
  color: red
}
.green {
  color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bus" id="result1">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="505" uniq-id="1452746805">b1
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746801">b1
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746823">b1
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746839">b1
  </div>
</div>
<hr>
<div class="bus" id="result2">
  <div class="seat red" data-number="A4(W)" data-book="1" amount="501" uniq-id="1452746803">b2
  </div>
  <div class="seat red" data-number="B4(W)" data-book="1" amount="505" uniq-id="1452746802">b2
  </div>
  <div class="seat red" data-number="C4(W)" data-book="1" amount="505" uniq-id="1452746804">b2
  </div>
  <div class="seat red" data-number="D4(W)" data-book="1" amount="505" uniq-id="1452746801">b2
  </div>
</div>

Upvotes: 1

Vincent Panugaling
Vincent Panugaling

Reputation: 906

Use parent() method to access the parent on that element you clicked, so you can get the number of instances for class .green

var total_class = 0;    

$(document).on("click",".seat",function(){
    total_class = $(this).parent().children('.green').length
})

Upvotes: 1

Sanjay Kumar N S
Sanjay Kumar N S

Reputation: 4739

Try this:

 $(document).on("click",".seat",function(){
    var total_class = $(this).parent().find('.green').length;
 });

Upvotes: 0

Related Questions