Обернуть несколько Li в общий див
Имеем сложное по вложенности меню. Нужно разбить второй уровень на несколько колонок. Имеющиеся плагины смотрела, но они разбивают только по первым li уровня, не учитывая последующие ul, в которых количество элементов может быть разным. Поэтому высота у колонок получается разная.
была идея на вот такую конструкцию
$("li.item-3246").before('<div class="menucols">');
$("li.item-3269").after('</div><div class="menucols">');
$("li.item-3289").after('</div><div class="menucols">');
$("li.item-3289").after('</div>');
но гадский браузер (или не браузер) закрывает каждый див, хотя его об этом никто не просит, то есть вместо открывающего <div class="menucols"> у меня получается <div class="menucols"></div> :( jQuery(document).ready(function($) использую. Как можно побороть сию печальку? |
Ленча,
что на входе, что на выходе - только необходимое? |
Не совсем понятен вопрос, уточните, пожалуйста.
|
Ленча,
на входе
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
</ul>
на выходе
<ul>
<div class="menucols"><li>01</li></div>
<li>02</li>
<li>03</li>
<div class="menucols"><li>04</li></div>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
</ul>
|
Ленча,
http://api.jquery.com/wrapAll/ ? |
на входе
<ul>
<li>01</li>
<li>02</li>
<ul>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
</ul>
на выходе хочу
<ul>
<div class="menucols">
<li>01</li>
<li>02</li>
<ul>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
<li>03</li>
<li>04</li>
</div>
<div class="menucols">
<li>05</li>
<li>06</li>
</div>
<div class="menucols">
<li>07</li>
<li>08</li>
<li>09</li>
</div>
</ul>
а получаю
<ul>
<div class="menucols"></div>
<li>01</li>
<li>02
<ul>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
</li>
<div class="menucols"></div>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<div class="menucols"></div>
<li>07</li>
<li>08</li>
<li>09</li>
<div class="clear"></div>
</ul>
По этой функции уже гуглила, но не поняла пока как указать список элементов, у которых нет одинакового признака. Они генерируются php, и логически им никак нельзя придать одинаковый класс. Не за что зацепиться |
Ленча,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.menucols {
border: 1px #FF0000 dotted;
margin: 4px;
}
.clear{
height: 2px;
background-color: #0000FF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var ul = $("ul.test"), li = ul.children();
li.slice(0,4).wrapAll( "<div class='menucols' />");
li.slice(4,6).wrapAll( "<div class='menucols' />");
li.slice(6).wrapAll( "<div class='menucols' />");
ul.append("<div class='clear' />")
});
</script>
</head>
<body>
<ul class="test">
<li>01</li>
<li>02
<ul>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
</ul>
</body>
</html>
|
Цитата:
|
laimas,
браузеры не против, значит можно, а вот на счёт нужно, есть сомнение. :) |
Не знаю как насчет валидности - не проверяла - но пилят так все, кому не лень)
У Вас есть другой способ в загашнике? Послушаю с удовольствием, люблю оригинальные решения. Тем более, что у меня небольшая проблема возникла. Меню, к которому надо это применить, само генерируется скриптом. При добавлении данной функции, меню генерироваться перестает. Вот примерно как все происходит
<script>
jQuery(document).ready(function($) {
$(".flex").clone().removeClass("flex").addClass("desktopmenu").appendTo(".nextmenu .center");
$(".desktopmenu ul").removeClass("flexnav identificator with-js opacity lg-screen");
//вот сюда вставляем функцию
$(function() {
var ul = $(".desktopmenu ul.count9), li = ul.children();
li.slice(0,4).wrapAll( "<div class='menucols' />");
li.slice(4,6).wrapAll( "<div class='menucols' />");
li.slice(6).wrapAll( "<div class='menucols' />");
ul.append("<div class='clear' />")
});
});
</script>
В консоли Цитата:
<div class="clear"></div> |
| Часовой пояс GMT +3, время: 14:17. |