In my page I have pairs of divs like this:
<div class="rounded red">
<p>Integer egestas neque vitae dui ultricies vel venenatis mi varius! </p>
</div>
<div class="client rounded">
<p>Client Name<br />
Client Company Name</p>
</div>
<div class="rounded red">
<p>Integer egestas neque vitae dui ultricies vel venenatis mi varius! </p>
</div>
<div class="client rounded">
<p>Client Name<br />
Client Company Name</p>
</div>
Where I need to assign the second div in the pair with the class “client rounded” a third class that will stagger each occurrence of “client rounded” a certain amount before returning to the start position.
I have four CSS classes set up to accomplish this, (client 1-4) and so I’m trying to figure out a way to tell JQuery to count every four divs, assign the appropriate classes, then re-start the count with the next div. I know basically no Jquery, so I’ve been trying to cobble together a solution with little success. I also tried the Jquery Iterate plugin, which based on the description would have done exactly what I needed if I could’ve gotten it working.
Here’s what I have right now:
$('article div.client').addClass(function() {
return 'client' + $(this).index();
});
This works, kinda, in that it at least added the new class whereas the other solutions didn’t. Unfortunately it counts EVERY div, not just the ones with the class .client, I can’t set my array of desired classes, and I have no idea how to make it restart the count after it hits #4. Any help would be much appreciated.