Javascript-форум - Обернуть несколько Li в общий див

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Обернуть несколько Li в общий див (https://javascript.ru/forum/jquery/69845-obernut-neskolko-li-v-obshhijj-div.html)

Обернуть несколько 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>

на входе

<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>

Цитата:

Сообщение от рони

на выходе
<ul>
<div class="menucols"><li>01</li></div>

А что так можно? :)

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>

В консоли

Цитата:

(index):627 Uncaught SyntaxError: Invalid or unexpected token

В этой строке только html

<div class="clear"></div>

Цитата:

Сообщение от Ленча

Не знаю как насчет валидности - не проверяла

А вы проверьте, конечно же это 100% невалидный код. А то что браузеры не чихают, ну так они и не дают при этом гарантии что не споткнутся.

Цитата:

Сообщение от Ленча

$(".desktopmenu ul.count9),

где кавычка вторая?

Нашла ошибку - кавычки пропустила

Да, уже нашла)) СПАСИБО