Форум

Ленча · #1 (**permalink**) 21.07.2017, 21:31

Имеем сложное по вложенности меню. Нужно разбить второй уровень на несколько колонок. Имеющиеся плагины смотрела, но они разбивают только по первым 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($) использую.

Как можно побороть сию печальку?

рони · #2 (**permalink**) 21.07.2017, 21:43

Ленча,
что на входе, что на выходе - только необходимое?

Ленча · #3 (**permalink**) 21.07.2017, 21:54

Не совсем понятен вопрос, уточните, пожалуйста.

рони · #4 (**permalink**) 21.07.2017, 21:58

Ленча,
на входе

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

рони · #5 (**permalink**) 21.07.2017, 22:00

Ленча,
http://api.jquery.com/wrapAll/ ?

Ленча · #6 (**permalink**) 21.07.2017, 22:21

на входе

<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, и логически им никак нельзя придать одинаковый класс. Не за что зацепиться

рони · #7 (**permalink**) 21.07.2017, 22:48

Ленча,

<!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 · #8 (**permalink**) 22.07.2017, 04:06

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

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

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

рони · #9 (**permalink**) 22.07.2017, 08:16

laimas,
браузеры не против, значит можно, а вот на счёт нужно, есть сомнение.

Ленча · #10 (**permalink**) 22.07.2017, 08:37

Не знаю как насчет валидности - не проверяла - но пилят так все, кому не лень)

У Вас есть другой способ в загашнике? Послушаю с удовольствием, люблю оригинальные решения. Тем более, что у меня небольшая проблема возникла. Меню, к которому надо это применить, само генерируется скриптом. При добавлении данной функции, меню генерироваться перестает. Вот примерно как все происходит

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

Форум

Справочник

Discord чат

Курсы javascript