Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2017, 21:31
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

Обернуть несколько 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($) использую.

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

Последний раз редактировалось Ленча, 21.07.2017 в 21:47.
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2017, 21:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
что на входе, что на выходе - только необходимое?
Ответить с цитированием
  #3 (permalink)  
Старый 21.07.2017, 21:54
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

Не совсем понятен вопрос, уточните, пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2017, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
на входе
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
http://api.jquery.com/wrapAll/ ?
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2017, 22:21
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

на входе

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ленча,
<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 22.07.2017, 04:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони
на выходе
<ul>
<div class="menucols"><li>01</li></div>
А что так можно?
Ответить с цитированием
  #9 (permalink)  
Старый 22.07.2017, 08:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

laimas,
браузеры не против, значит можно, а вот на счёт нужно, есть сомнение.
Ответить с цитированием
  #10 (permalink)  
Старый 22.07.2017, 08:37
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

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

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

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

Последний раз редактировалось Ленча, 22.07.2017 в 09:48.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить ширину и высоту элемента див sanhai Элементы интерфейса 8 13.11.2018 18:04
панель сортировки каталога, общий Get на несколько текущих параметров ef1 Элементы интерфейса 2 11.07.2017 14:34
Как обернуть каждый тег в несколько DIV содержащих по 1 атрибуту от этих самых тегов? Zaxap Общие вопросы Javascript 10 08.11.2016 11:56
Как обернуть несколько элементов? Lutidza Общие вопросы Javascript 3 01.08.2014 18:05
Сайт с див контентом Rastabong jQuery 1 14.07.2013 17:09