[jQuery] jquery each help
I have articles in a group of divs
<div class="art">
<div id="leftMain"><img src="media/img/greenBar.png" width="11"
height="211"/></div>
<div id="rightMain">
<span class="postedDate">POSTED: 15 MARCH 2008 1400 HOURS</span>
<div class="articleHeader"> > SNEAK PREVIEW OF <i>NO CHILD...</i></
div>
<div class="articleContent">Lorem ipsum dolor sit am
</div>
<div class="articleDownload">>> <a href="#">DOWNLOAD 10% DISCOUNT
PASS</a></div>
<div class="clearfix"></div>
</div>
<div class="art">
<div id="leftMain"><img src="media/img/greenBar.png" width="11"
height="211"/></div>
<div id="rightMain">
<span class="postedDate">POSTED: 15 MARCH 2008 1400 HOURS</span>
<div class="articleHeader"> > SNEAK PREVIEW OF <i>NO CHILD...</i></
div>
<div class="articleContent">Lorem ipsum dolor sit amet, conat
nulla facilisis.
</div>
<div class="articleDownload">>> <a href="#">DOWNLOAD 10% DISCOUNT
PASS</a></div>
<div class="clearfix"></div>
</div>
I am trying to loop through each class and display them one at a time,
article one will display and each class inside article one will show
(using the show()) function one at a time. This will happen with each
with each article one after another for as many articles as there are.
This could be 2 this could be 10. I know this is not a convenient way
to load a page but this is what i am trying to do. I am also using a
typewriter unction to display letters one at a time.
I have this right now
var arrayList = $.makeArray($('.art').get());
$.each(arrayList,function() {
$(this).show();
$('.postedDate').show().jTypeWriter({onComplete:function(){
$('.articleHeader').show().jTypeWriter({onComplete:function(){
$('.articleContent').show().jTypeWriter({onComplete:function()
{
}});
}});
}});
});
it doesnt quite get it right.
Here is the sample page
http://pavlishgroup.com/projects/cpt-test/
thanks in advance