Как добавить новый div после N div`ов? (jQuery)

[smsupport]

Делаю верстку слайдера и никак не могу найти ответ на этот вопрос. У меня такая структура:

PHP код:

        <!-- slide -->
        <div class="showcase-slide">
            <div class="showcase-content">
                
<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>
 
<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

<div class="maintopslide">
<a href="#"><img src="delpics/4333795819_2a483b73d9_b-500x261.jpg" width="306" height="160" /></a>
<a href="#">Название новости</a>
<span>Тренд месяца</span>
</div>

                </div>
            </div>
        <!-- slide end --> 


Новый div нужно вставить после каждого 3-го <div class="maintopslide">.

[ar4ibas]

у меня так сработало

PHP код:

$(".maintopslide").each(function (i, node) {
    if (i>0 && (i+1) % 3 === 0) {
        $('<div>new</div>').insertAfter(node);
    }
}); 


можно и так но это менее очевидно

PHP код:

if ((i-2) % 3 === 0) {