I have a tab control, and I am trying to get the index of the selected Tab, but I have a problem. I have some hidden tabs before the selected, and I am getting an Index like this:
Tab1 - Tab2(hidden) - Tab3(hidden) - Tab4
When I try to get the index of Tab4, I get 1, but I want to get a 3 (index from 0 to 3).
I am using ui.newTab.index() for this, and It ignore the hidden tabs.
Thanks and good coding!!
Edit. This is my code:
jQuery("#testTabs").tabs({ heightStyle: "fill", activate: function (event, ui) {
var index = ui.newTab.index();
}
});
It's in the event.
Are you using jQuery 1.10+ cause 1.8 and earlier (I think) uses select not activate?
Btw your code has no linked query, make a fiddle with linked jQ and add in HTML while you are at it?
I refactored someone's Fiddle to have a hidden element and it still works (open the console and see). So I don't think your problem is with hidden. Maybe display: none? Than tab is not even in DOM.
<div id="tabs">
<ul>
<li><span>One</span></li>
<li style="visibility: hidden;"><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
JS
$( "#tabs" ).tabs({
activate: function( event, ui ) {
console.log(ui.newTab.index());
}
});
this fiddle
Related
I am using the following code to dynamically add items to a page. I have each component as an object then I call each individual one with a For-in loop.
My question is, how can I convert my data to JSON, and then import it into my JS file to use?
const pageObjects = {
objectComponent1 : {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at. ",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
objectComponent2: {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at.",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
};
const docsContent = document.querySelector(".docs-content");
for (const singleObject in pageObjects) {
// add title
let objectTitle = document.createElement("h2");
objectTitle.setAttribute("id", pageObjects[singleObject].provideId);
objectTitle.innerHTML = pageObjects[singleObject].provideTitle;
docsContent.append(objectTitle);
// add description
let objectDesc = document.createElement("p");
objectDesc.innerHTML = pageObjects[singleObject].provideDesc;
docsContent.append(objectDesc);
// add example
let objectExample = document.createElement("div");
objectExample.classList.add("docs-example");
objectExample.innerHTML = pageObjects[singleObject].provideHtml;
docsContent.append(objectExample);
// add provide code
let objectCode = document.createElement("div");
objectCode.classList.add("docs-code");
docsContent.append(objectCode);
let pre = document.createElement("pre");
objectCode.append(pre);
let code = document.createElement("code");
code.innerHTML = pageObjects[singleObject].provideHtml;
pre.append(code);
};
I am using cycle2 (http://jquery.malsup.com/cycle2/) to produce a main slideshow containing a number of other slideshows (which contain images and text of variable heights). I want the height of the parent and current slideshow (and container) to resize to the current slide height. This nearly works but I am having a few problems that I can't for the life of me see why and would be massively grateful if someone could point me in the right direction.
You can see a live fiddle at http://jsfiddle.net/deshg/x8xaxx39/
My questions are:
1) Why on first load does it show the 2nd nested slideshow through the first one (when i click on the main pager it fixes it)?
2) Why on first load does cycle-slideshow height not match the current slide height as i'm using the wait command to wait for the images to load and have auto-height set to container (when i click on the main pager it fixes this as well)?
3) Is it a bug that when you manually drag to resize the viewport width sometimes the cycle-slideshow height value is not updated which means the parent height doesn't update or is there a way to solve this?
4) When you click to view gallery 2 and then click back to view gallery 1 the gallery 1 pager (the thumbnails at the bottom) don't work as gallery 2 has a higher z-index despite not being part of the active slide? How do I ensure the active slide has the highest z-index?
Thanks so much for any advice you can give, it doesn't seem to be playing nice for me!
Dave
FYI the related code is:
<div class="module">
<div class="inner">
<h2>GALLERIES</h2>
<!-- empty element for pager links -->
<div id="custom-pager-galleries" class="custom-pager"></div>
<p>Ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<div class="cycle-slideshow gallery"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-galleries"
data-cycle-pager-template="<a href=#> {{name}} </a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
data-cycle-hide-non-active="true"
>
<div data-name="Gallery 1">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery" class="custom-pager gallerythumbnails"></div>
</div>
</div>
<div data-name="Gallery 2">
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=0
data-cycle-slides="> div"
data-cycle-pager="#custom-pager-gallery2"
data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
data-cycle-loader="wait"
data-cycle-auto-height="container"
>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 2</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach1.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 1</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 3</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach3.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 4</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
<div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach2.jpg" alt="">
<p class="green"><strong>IMAGE TITLE 5</strong></p>
<p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
</div>
</div>
<div class="pager">
<div id="custom-pager-gallery2" class="custom-pager gallerythumbnails"></div>
</div>
</div>
</div>
</div>
</div>
What you're trying to do is not easy, or provided for "out of the box".
First,
data-cycle-auto-height="container"
is not an allowed option. Check the API. It needs to be an integer, a ratio, or the string "calc".
Second, autoheight can be tricky. You're on the right track with using the wait option on the loader. The problem is that the parent slideshow will still initialize before the children slideshows initialize, simply because it occurs earlier in markup. What you probably want to do is initialize the child slideshows, then initialize the parent slideshow as a callback once both of the child slideshows are fully loaded. Only then will they have layout height that the parent slideshow can use for autoheight calculations. You will need to move off of the declarative syntax, and instead to call cycle slideshow imperatively. I would suggest using jQ deferred objects, and when() syntax to simplify the callback structure.
In semi-pseudo-code:
var childSs1 = new $.Deferred();
var childSs2 = new $.Deferred();
$('.child-slideshow1).on("cycle-post-initialize", function() {
childSs1.resolve();
});
$('.child-slideshow2).on("cycle-post-initialize", function() {
childSs2.resolve();
});
// The following will be called asynchronously
$.when( childSs1, childSs2 ).done(function () {
$(.parent-slideshow).cycle({options});
});
Third, you are most likely running into issues with event bubbling. If an event fires on a child slideshow, that synthetic event will bubble to all parent elements in the DOM, including your parent slideshow(s). That is going to confuse the heck out of the parent slideshow, because it's going to interpret those events as applying to it. Cycle2 wasn't really written with this use case in mind. That isn't to say it can't be done. But you probably will need to do lock down bubbling on all cycle events with something drastic like:
$( ".all-slideshows" ).on("cycle-after cycle-before cycle-bootstrap
cycle-destroyed cycle-finished cycle-initialized cycle-next
cycle-pager-activated cycle-paused cycle-post-initialize
cycle-pre-initialize cycle-prev cycle-resumed
cycle-slide-added cycle-slide-removed cycle-stopped
cycle-transition-stopped cycle-update-view", function( event ) {
event.stopPropagation();
});
Also, it would make it easier for people to help out if you reduced your fiddle as much as possible. Hope this helps.
Hello I have below code for FAQ Toggle but the issue is when I click on any question it slides and show the answer perfectly but the all arrows in all question triggers.
<div class="faqbox" id="faq-list">
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
</div><!-- faqbox -->
This is the JS
function toggleFaqArrow(){
$('.qblock .arrow').toggleClass('rotate');
}
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
toggleFaqArrow();
});
});
Your toggleFaqArrow() function targets all arrow class elements inside all qblock class elements. You only want to toggle the rotate class of the sibling with class arrow of the h2 element clicked.
To achieve this, change your JS to:
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
$(this).siblings('.arrow').toggleClass('rotate');
});
});
I have several bios that all look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>
Not the prettiest text blocks, but they're auto-generated by the system. I need to iterate through each <p> and take everything after the first set of break tags and wrap that in something like a <div>.
The end result would be:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>
<div class="theRest">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>
Try this (inspired of #dave answer):
$("p").each(function(){
// Add a div after the second <br /> (in the current <p>)
$("br:eq(1)", this).after('<div class="theRest"> </ div>');
// Split each "child" in an array
$(this).contents().filter(function(index, elem){
// Keep only children after the <div />
return index > 3;
// Remove and put them into the <div />
}).detach().appendTo($(".theRest", this));
});
Fiddle
Try this:
$('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
But it's not a good enough solution.
For prevent your other p element be wrapped, You should find from any parent element like below:
$('.father').find('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
Try this:
$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
return index > 3;
}).detach().appendTo(".theRest");
Fiddle
Even though the format returned from server is bad from my standards as it complicates things for the given purpose. However, with some tricks there is still a way to do it.
Explanation: select all nodes, discard the first node because that happens to be the text node, then use jquery wrapAll method to take everything after that node and wrap it up in new div.
Demo: http://jsfiddle.net/qe3bm92e/3/
var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));
You can replace '.txt' with 'p' but it's not a good practice for very obvious reason.
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?
Try the following:
$('#event_listings .event_month').each(function(i, obj) {
var count = $(this).find('.event').length;
console.log(count);
});
this is an object, so you can't concatenate it with a string. Wrap it in jQuery then filter its children afterwards.
var Count = $(this).children('.event').length;
try this
$(function(){
$('div.event_month').each(function(){
alert($(this).children('.event').length);
});
}
);
here is a functional example: http://jsfiddle.net/Ug7SF/