Как скопировать ссылки с параметрами в другой блок?
Добрый день уважаемые. Помогите с решением такой задачи https://jsfiddle.net/c1m7qq17/2/ Есть меню bl_subNav__full в котором есть категории bl_subNav__children с своими пунктами меню bl_subNav__link Вопрос - Как сделать дублирование этих детей в новые подкатегории меню mobile_subNav с ссылками. То есть мне необходимо что б в новое меню собирались li + a(с их href) + p с названием товаров без Img. ? Как обойти все пункты и пособирать нужные элементы?
|
|
Black_Star,
можно сюда html до и после? |
Nexus, немного не так.
рони Вот код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mobile_subNav{
width: 100%;
min-height: 30px;
border: 1px solid #000;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="bl_subNav__full hidden">
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка1">
<p class="bl_subNav__name">Куртки</p>
<img class="bl_subNav__img" src="" alt="Куртки">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка2">
<p class="bl_subNav__name">Обувь</p>
<img class="bl_subNav__img" src="" alt="Обувь">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка3">
<p class="bl_subNav__name">Демисезонная одежда 1</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка4">
<p class="bl_subNav__name">Демисезонная одежда 2</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка5">
<p class="bl_subNav__name">Демисезонная одежда 3</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 3">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка6">
<p class="bl_subNav__name">Летняя одежда 1</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка7">
<p class="bl_subNav__name">Летняя одежда 2</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка8">
<p class="bl_subNav__name">Летняя одежда 3</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка9">
<p class="bl_subNav__name">Летняя одежда 4</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 4">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 1</p>
<img class="bl_subNav__img" src="" alt="Обувь 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 2</p>
<img class="bl_subNav__img" src="" alt="Обувь 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 3</p>
<img class="bl_subNav__img" src="" alt="Обувь 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 4</p>
<img class="bl_subNav__img" src="" alt="Обувь 4">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 5</p>
<img class="bl_subNav__img" src="" alt="Обувь 5">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 1</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 2</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 3</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 4</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 4">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 5</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 5">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 6</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 6">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="http://norfin.loc/palatki-108/">
<p class="bl_subNav__name">Кемпинг 7</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 7">
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="my_block">
<ul class="bl_fullCategories__field " style="display: block;">
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Зимняя одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Демисезонная одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Летняя одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Обувь</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Кемпинг</a>
</li>
</ul>
</div>
<script>
$(".bl_fullCategories__link").each(function() {
$(this).append('<ul class="mobile_subNav"></ul>');
});
</script>
</body>
</html>
Необходимо что б пункты меню были привязаны к свои родителям http://prntscr.com/j9wmbr То есть в категории Зимняя одежда были пункты Куртки Обувь со своими ссылка. В категории Демисезонная одежда были пункты в ссылках Демисезонная одежда 1 Демисезонная одежда 2 Демисезонная одежда 3 и тд. Ориентация по классам .bl_subNav__children |
Black_Star, не могу вашу верстку прочитать.
Как определить в какой блок нужно затолкать ту или иную ссылку? |
Black_Star,
меню определяется не копированием html-блоков на клиенте, а деревом каталогов в базе. Сервер получает из базы дерево и строит меню, либо отдает описание дерева как объект клиенту, и он строит меню. |
Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mobile_subNav{
width: 100%;
min-height: 30px;
border: 1px solid #000;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="bl_subNav__full hidden">
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка1">
<p class="bl_subNav__name">Куртки</p>
<img class="bl_subNav__img" src="" alt="Куртки">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка2">
<p class="bl_subNav__name">Обувь</p>
<img class="bl_subNav__img" src="" alt="Обувь">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка3">
<p class="bl_subNav__name">Демисезонная одежда 1</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка4">
<p class="bl_subNav__name">Демисезонная одежда 2</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка5">
<p class="bl_subNav__name">Демисезонная одежда 3</p>
<img class="bl_subNav__img" src="" alt="Демисезонная одежда 3">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка6">
<p class="bl_subNav__name">Летняя одежда 1</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка7">
<p class="bl_subNav__name">Летняя одежда 2</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка8">
<p class="bl_subNav__name">Летняя одежда 3</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="ссылка9">
<p class="bl_subNav__name">Летняя одежда 4</p>
<img class="bl_subNav__img" src="" alt="Летняя одежда 4">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 1</p>
<img class="bl_subNav__img" src="" alt="Обувь 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 2</p>
<img class="bl_subNav__img" src="" alt="Обувь 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 3</p>
<img class="bl_subNav__img" src="" alt="Обувь 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 4</p>
<img class="bl_subNav__img" src="" alt="Обувь 4">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Обувь 5</p>
<img class="bl_subNav__img" src="" alt="Обувь 5">
</a>
</li>
</ul>
</li>
</ul>
<ul class="bl_subNav__children">
<li class="bl_subNav__field">
<ul class="bl_subNav_wrapper">
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 1</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 1">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 2</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 2">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 3</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 3">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 4</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 4">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 5</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 5">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="javascript:void(0);">
<p class="bl_subNav__name">Кемпинг 6</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 6">
</a>
</li>
<li class="bl_subNav__link">
<a class="bl_subNav__name" href="http://norfin.loc/palatki-108/">
<p class="bl_subNav__name">Кемпинг 7</p>
<img class="bl_subNav__img" src="" alt="Кемпинг 7">
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="my_block">
<ul class="bl_fullCategories__field " style="display: block;">
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Зимняя одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Демисезонная одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Летняя одежда</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Обувь</a>
</li>
<li class="bl_fullCategories__item js-navItem">
<a class="bl_fullCategories__link">Кемпинг</a>
</li>
</ul>
</div>
<script>
var a = $(".bl_fullCategories__link");
$(".bl_subNav__children").each(function(i, ul) {
var li = $(".bl_subNav__link", ul).clone();
$("img", li).remove();
ul = $('<ul class="mobile_subNav"></ul>').insertAfter(a[i]);
li.appendTo(ul)
});
</script>
</body>
</html>
|
рони, спасибо. :thanks: Это именно то что надо
|
| Часовой пояс GMT +3, время: 04:40. |