Question

I need to count the number of div’s with the event class inside each div named event_month.

I have this at the moment:

$('#events #event_listings .event_month').each(function(i, obj) {
    var Count = $(this +'> .event').size();
    console.log(Count); 
});

This is the HTML I am trying to apply the Javascript to:

<div class="header"><span>October 2012</span></div>
  <div class="event">
    <h3>Telematics Munich 2012 (29th to 30th)</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div>
<div id="september2012" class="event_month">
  <div class="header"><span>September 2012</span></div>
</div>
<div id="august2012" class="event_month">
  <div class="header"><span>August 2012</span></div>
</div> 
<div id="july2012" class="event_month">
  <div class="header"><span>July 2012</span></div>
</div> 
<div id="june2012" class="event_month">
  <div class="header"><span>June 2012</span></div>
  <div class="event">
    <h3>Telematics Detroit 2012 (6th to 7th)</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div>
<div id="may2012" class="event_month">
  <div class="header"><span>May 2012</span></div>
  <div class="event">
    <h3>Insurance Telematics Europe 2012 (9th to 10th)</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo ante iaculis purus placerat sed consectetur odio venenatis. Ut erat nisi, laoreet at tempor vel, sollicitudin sed dui.</p>
  </div>
</div>

Needless to say, it’s not working. Any ideas?

Answer 1

Try the following:

$('#event_listings .event_month').each(function(i, obj) {
    var count = $(this).find('.event').length;
    console.log(count); 
});