Форум

Black_Star · #1 (**permalink**) 25.04.2018, 08:48

Добрый день уважаемые. Помогите с решением такой задачи https://jsfiddle.net/c1m7qq17/2/ Есть меню bl_subNav__full в котором есть категории bl_subNav__children с своими пунктами меню bl_subNav__link Вопрос - Как сделать дублирование этих детей в новые подкатегории меню mobile_subNav с ссылками. То есть мне необходимо что б в новое меню собирались li + a(с их href) + p с названием товаров без Img. ? Как обойти все пункты и пособирать нужные элементы?

Nexus · #2 (**permalink**) 25.04.2018, 09:10

Так?
https://jsfiddle.net/c1m7qq17/4/

рони · #3 (**permalink**) 25.04.2018, 09:12

Black_Star,
можно сюда html до и после?

Black_Star · #4 (**permalink**) 25.04.2018, 14:34

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

Nexus · #5 (**permalink**) 25.04.2018, 14:50

Black_Star, не могу вашу верстку прочитать.
Как определить в какой блок нужно затолкать ту или иную ссылку?

laimas · #6 (**permalink**) 25.04.2018, 14:58

Black_Star,
меню определяется не копированием html-блоков на клиенте, а деревом каталогов в базе. Сервер получает из базы дерево и строит меню, либо отдает описание дерева как объект клиенту, и он строит меню.

рони · #7 (**permalink**) 25.04.2018, 16:23

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>

Black_Star · #8 (**permalink**) 25.04.2018, 20:42

рони, спасибо.

Это именно то что надо

Форум

Справочник

Discord чат

Курсы javascript