Как сделать выборку jquery и обернуть выбранное в дополнительный div?

Question

[Andrey Dontsov]

Приветствую!
Уважаемые, помогите с помощью jquery оформить вложенный список, следующим образом.
Прошу простить за использование JQ, не знаю возможно ли такое в стандартном меню WP.
Забегая вперед, для экспериментов подготовил codepen

Итак, структура такая.
Обратите внимание, некоторые li имеют class="sub-rubriс" - они как бы делят следующие за ними li на подрубрики, "по цене", "по стилю", "по назначению" и т.д.
Следом за ними (до следующего li class="sub-rubriс") идут li БЕЗ класса "sub-rubriс" и в каждой группе "sub-rubriс" количество элементов li разное!

<ul class="menu">
	<li class="menu-item-has-children">
		<a href="http://xxx/kitchens/">Кухни</a>
		<ul class="sub-menu">

			<li class="sub-rubriс menu-item"><a href="#">ПО ЦЕНЕ</a></li>
			<li class="menu-item"><a href="/link/">Эконом</a></li>

			<li class="sub-rubriс menu-item"><a href="#">ПО СТИЛЮ</a></li>
			<li class="menu-item"><a href="/link/">Хай-тек</a></li>
			<li class="menu-item"><a href="/link/">Современные</a></li>
			<li class="menu-item"><a href="/link/">Классические</a></li>
			<li class="menu-item"><a href="/link/">Маленькие</a></li>

			<li class="sub-rubriс menu-item"><a href="#">ПО НАЗНАЧЕНИЮ</a></li>
			<li class="menu-item"><a href="/link/">С барной стойкой</a></li>
			<li class="menu-item"><a href="/link/">С островом</a></li>

			<li class="sub-rubriс menu-item"><a href="#">ПО ЦВЕТУ</a></li>
			<li class="menu-item"><a href="/link/">Зеленая</a></li>

			<li class="sub-rubriс menu-item"><a href="#">ПО МАТЕРИАЛУ</a></li>
			<li class="menu-item"><a href="/link/">Из пластика</a></li>
			<li class="menu-item"><a href="/link/">Из массива</a></li>

			<li class="sub-rubriс menu-item"><a href="#">ПО ФОРМЕ</a></li>
			<li class="menu-item"><a href="/link/">Угловые</a></li>
			<li class="menu-item"><a href="/link/">Прямые</a></li>
			<li class="menu-item"><a href="/link/">Радиусные</a></li>
		</ul>
	</li>
</ul>

Задача, с помощью jquery поделить все подрубрики "sub-rubriс", добавить к каждой такой группе div wrapper, т.е. выбрать и обернуть их, например в div class sub-rubrik-wrap.
Чтобы получилось вот так:

<ul class="menu">
	<li class="menu-item-has-children">
		<a href="http://xxx/kitchens/">Кухни</a>
		<ul class="sub-menu">

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО ЦЕНЕ</a></li>
				<li class="menu-item"><a href="/link/">Эконом</a></li>
			</div>

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО СТИЛЮ</a></li>
				<li class="menu-item"><a href="/link/">Хай-тек</a></li>
				<li class="menu-item"><a href="/link/">Современные</a></li>
				<li class="menu-item"><a href="/link/">Классические</a></li>
				<li class="menu-item"><a href="/link/">Маленькие</a></li>
			</div>

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО НАЗНАЧЕНИЮ</a></li>
				<li class="menu-item"><a href="/link/">С барной стойкой</a></li>
				<li class="menu-item"><a href="/link/">С островом</a></li>
			</div>

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО ЦВЕТУ</a></li>
				<li class="menu-item"><a href="/link/">Зеленая</a></li>
			</div>

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО МАТЕРИАЛУ</a></li>
				<li class="menu-item"><a href="/link/">Из пластика</a></li>
				<li class="menu-item"><a href="/link/">Из массива</a></li>
			</div>

			<div class="sub-rubrik-wrap"
				<li class="sub-rubrik menu-item"><a href="#">ПО ФОРМЕ</a></li>
				<li class="menu-item"><a href="/link/">Угловые</a></li>
				<li class="menu-item"><a href="/link/">Прямые</a></li>
				<li class="menu-item"><a href="/link/">Радиусные</a></li>
			</div>
		</ul>
	</li>
</ul>

Спасибо!

Comments

[Hyubert]

а шаблон поменять, не?

[Emptyform]

Hyubert: Это слишком простое решение

[Andrey Dontsov]

Спасибо, Emptyform, Hyubert, ваш юмор понятен и полностью оправдан, но второй строкой после приветствия я извинился и подчеркнул, что не знаю откуда подступиться к правке шаблона вывода меню.
Как более опытный, вместо бесполезных шуток, разве не лучше было бы направить, подсказать где искать решение?
Я знаю что есть wp walker и в нем можно переопределить шаблон вывода меню, но пока для меня это сложная задача, именно поэтому я обратился за помощью.
Другой вариант ответа мог быть таким: "ТС, ты городишь жуткие костыли и, вижу, сам это понимаешь. Разбери wp walker, условие для проверки наличия класса sub-rubric будет таким ... ".
Но никто этого не сделал, бесполезно пошутить "А шаблон поменять не?" может любой. А ты покажи как, Hyubert? Если не знаешь - лови такую же тупую шутку в ответ.
Emptyform, спасибо за помощь, кроме шуток, цикл jQ работает.

[Andrey Dontsov]

Hyubert: А ты покажи как?! Или просто юморист? Помочь, подсказать, не?

[Hyubert]

AndreyBLG: не адекватный Вы какойто, вопрос это был и скорее в правильную сторону.
Ведь что-то выводит это меню на сайт, значит и вивод можно изменить.

[Emptyform]

AndreyBLG: Полагаю, надо было добавить тег "WORDPRESS", может кто из знатоков оного и отозвался бы. А так теги ВЕРСТАЛЬЩИКИ, JQUERY, JAVASCRIPT - это обращение к фронтендерам

[Emptyform]

AndreyBLG: А вообще попробуйте перефразировать вопрос отдельной темой типа - как изменить такое-то меню в WordPress и укажите тег WORDPRESS. Наверняка, для спецов это все тривиально.

[Andrey Dontsov]

Emptyform: Спасибо, да, так было бы правильнее. Спасибо за помощь

[Andrey Dontsov]

Hyubert: Приношу извинения, если был не правильно понят. Просто подумайте над реальной пользой вашего ответа, она нулевая и воспринимается как неудачная шутка, а не реальная помощь. Второй строкой после приветствия я подчеркнул, что не знаю как это сделать и обращаюсь за помощью.

- Люди, автомобиль не заводится, стартер не крутит. Что может быть?
- А машину починить не?

Понимаете?) Ладно, все ровно спасибо, прошу извинить, был не прав.. наверно

[Hyubert]

AndreyBLG: так Вы не разбираетесь в структуре шаблона, если это вордпрес то Вам нужно
- через ftp получаем доступ к файлам на мервере
- идем в /public_html/wp-content/themes/<название вашей темы>
- далее ищите файл шаблона (или будет в header.php или nav, menu или чтото подобное), есть вариант что структура формируеться в конфигурационіх файлах плагина, или темы там уже походу нужно разбираться

советую ознакомиться с документацией

Answer 1

[Emptyform]

Думаю, должно существовать более изящное решение, но пока вот так:

while ($('.sub-menu > .sub-rubriс').length > 0) {
    $('.sub-menu > .sub-rubriс:first')
        .nextUntil('.sub-rubriс')
        .add($('.sub-menu > .sub-rubriс:first'))
        .wrapAll('<div class="sub-rubrik-wrap"></div>');
}

Comments

[Andrey Dontsov]

Спасибо, Emptyform, мое почтение

[Hyubert]

Лютий костиль, все же не понял, почему нельзя изменить файл вывода меню? зачем тут JQ?

[Andrey Dontsov]

Hyubert: Да, очевидно это костыль, от незнания и недостатка опыта, есть полное понимание, что это костыль, но он работает сразу, немедленно, и, по крайней мере, позволяет спокойно искать решение с шаблоном menu wp.