Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.05.2010, 22:37
Интересующийся
Отправить личное сообщение для Alexxx Посмотреть профиль Найти все сообщения от Alexxx
 
Регистрация: 30.05.2010
Сообщений: 15

Как обрамить несколько элементов в ul
Суть задачи:
Обрамить пункты меню в UL для того, что бы меню росло не в высоту, а в ширину т.е. образовывались столбцы.

Исходный HTML

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
<li><a href="#">Bastex</a></li>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
</ul>


И в итоге с помощью Jquery я хочу получить такое преобразование:

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
</ul>
<ul class="menu">
<li><a href="#">Bastex</a></li>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
</ul>


Получилось, что меню разбивается на каждой четвертой по счету ссылке (li), таким образом при добавлении новых ссылок в меню - оно будет образовывать новые колонки и они будут выстраиваться по горизонтали (CSS).

Пытался делать так:
$(function() {
    $('ul.menu li:eq(4)').after('</ul>' + '<ul class="menu">'); 
});


Но далее знаний не хватает, а поиск дал больше вопросов, че ответов =(


Благодарю)
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2010, 08:16
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

пробегаешь по li и формируешь в переменной новый список из ul. А потом существующий заменишь на получившийся.
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2010, 08:58
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

$('ul.menu li').each(function (i) {
	if (i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});

Последний раз редактировалось exec, 31.05.2010 в 11:10.
Ответить с цитированием
  #4 (permalink)  
Старый 31.05.2010, 10:12
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Сообщение от exec Посмотреть сообщение
$('ul.menu li').each(function (i) {
	if ((i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});
Скобочка в условии, ошибка.
А в условии сказано, что после 12 элемента добавить </ul><ul class="menu"> ? Или мне мануальчик перечитать надо?
__________________
Нет предела совершенству...
Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2010, 10:16
Интересующийся
Отправить личное сообщение для Alexxx Посмотреть профиль Найти все сообщения от Alexxx
 
Регистрация: 30.05.2010
Сообщений: 15

Сообщение от exec Посмотреть сообщение
$('ul.menu li').each(function (i) {
	if ((i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});
Наверное, корректнее так:

$(function() {
$('ul.menu li').each(function (i) {
	if (i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});
});


Спасибо!

Последний раз редактировалось Alexxx, 31.05.2010 в 10:20.
Ответить с цитированием
  #6 (permalink)  
Старый 31.05.2010, 10:23
Интересующийся
Отправить личное сообщение для Alexxx Посмотреть профиль Найти все сообщения от Alexxx
 
Регистрация: 30.05.2010
Сообщений: 15

На выходе получаю некорректный HTML

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<ul class="menu"></ul>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
<li><a href="#">Bastex</a></li>
<ul class="menu"></ul>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
<li><a href="#">Caspani Tino</a></li>
</ul>


Вероятно, что Jquery переставляет местами </ul> и <ul class="menu"> дабы исправить "ошибку".
Ответить с цитированием
  #7 (permalink)  
Старый 31.05.2010, 10:24
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Работает что ли так? А если у родителя hlml() посмотреть?
Ответить с цитированием
  #8 (permalink)  
Старый 31.05.2010, 10:25
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от Alexxx Посмотреть сообщение
На выходе получаю некорректный HTML
делай как я тебе говорил (я у себя проверял в работе).
Ответить с цитированием
  #9 (permalink)  
Старый 31.05.2010, 10:36
Интересующийся
Отправить личное сообщение для Alexxx Посмотреть профиль Найти все сообщения от Alexxx
 
Регистрация: 30.05.2010
Сообщений: 15

Сообщение от micscr Посмотреть сообщение
делай как я тебе говорил (я у себя проверял в работе).
Я в Jquery небельмес =) Только только начал изучать... Логику понял, но код реализовать с ходу точно пока не смогу, поэтому и прошу помощи тут.
Ответить с цитированием
  #10 (permalink)  
Старый 31.05.2010, 10:47
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

За готовым кодом - в раздел работа, там за пару баксов сделают.

А тут попрошу потрудиться самому иначе не будет толка.
Алгоритм уточню:
1) создаем контейнер накопления
2) пробегаем по li существующего при этом каждые 4-е запихиваем в отдельный ul
3) эти отдельные ul добавляем в контейнер
4) вместо исходного списка вставляем контейнер

Используются только широко распространенные методы jQuery. Жду попыток.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить background всех дочерних элементов внутри <div>? libinstyle Общие вопросы Javascript 2 24.03.2010 13:25
Как прочитать список имён элементов в Cookie? Бобр Общие вопросы Javascript 6 09.02.2010 08:47
как записать id всех элементов в массив? SunYang Общие вопросы Javascript 21 06.02.2010 22:50
Как снять фокус со всех элементов? Logo Общие вопросы Javascript 7 02.07.2009 23:53
Как обработать несколько элементов подряд? vladymyrk jQuery 1 07.01.2009 20:33