вопрос про Js (jquery, Mootools)

[Lord Daedra]

Здравствуйте!

Возник вопрос:

У меня есть галерейка

вот такая структура
<ul><li class="type4"><a href=""><img src="" alt="" /></a></li>...</ul>

через каждые 4 картинки мне надо вставлять <br clear="all" />, так как картинки разные по высоте

скрипт в CMS так не умеет, у него 1 шаблон на все картинки...

как через js (jQuery, например) вставить после каждого четвёртого элемента li.type4 код <br clear="all" /> ?

я чувствую, что на jQuery это делается элементарно, но к сожалению вообще не разбираюсь в js

буду очень признателен, если кто-то из умельцев напишет пару строк.

спасибо

P.S. На странице уже используется Mootools для самой галереи (если возможно, подскажите как через неё). Но можно подключить и любую другую библиотеку, лишь бы это дало результат.



Ошибся с разделом форума, когда создавал тему. Модератор, перенесите, пожалуйста, мою тему в соответствующий раздел.

 

[Lord Daedra]

Спасибо за комментарий, но он не решает моей проблемы и не относится к теме, так зачем он?..

Сейчас есть проблема и она не связана с Mootools...
Прозводительность и скорость работы js-скриптов некритична, поэтому какие библиотеки ипользуются мне всё равно. Если мне подскажут решение на jQuery или прототипе - я подключу и их.

 

[Lord Daedra]

Компонент галереи разрабатывался группой разработчиков и они решили использовать Mootools. Наверное, на то были свои причины. Мне эта галерея нравится, так почему бы её не использовать?.. Ей нужна Mootools.

Это примерно то же самое, что ругать Windows, обвиняя во всех грехах, а потом продолжать на ней работать, так как некоторые программы идут только на Windows (или для поиска и изучения аналогов потребуется дополнительное время). Раз ей нужна Mootools, то какая мне разница - пусть использует Mootools, без него ведь она не будет работать, так какой смысл его ругать...

Проблема в том, что мне надо с помощью JS вставить в код страницы необходимый мне тег.

<ul class="gallery">
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
...
</ul>

вот так сейчас, а надо вот так:

<ul class="gallery">
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<br clear="all" />
<li class="type4"><a href=""><img src="" alt="" /></a></li>
<li class="type4"><a href=""><img src="" alt="" /></a></li>
...
</ul>

то есть после каждого четвёртого элемента li с классом type4 вставлять <br clear="all" />

Это нужно потому что у меня картинки разной высоты и они не хотят по столбикам становиться и вёрстка едет...

мне кажется на jQuery будет как-то так:

$(document).ready(
jQuery('li.type4').each(function(el) {
if(остаток от деления номера элемента по счёту на 4 равен нулю) {jQuery(this).append('<br clear="all" />')}
}
);