Как обернуть каждый элемент в контейнер jQuery

322

14 апреля 2017, 22:36

Мне нужно выбрать все элементы a обернуть кадлый из них в li и добавить в ul с id="menu" .

Делаю так, но не работает.

$('#toplinks a').clone().wrap('<li>').appendTo('#menu');

#toplinks a { 
  display: block; 
} 
 
#menu li { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<p id="toplinks"> 
  <a>Главная</a> 
  <a>Бланк заказа</a> 
  <a>Прайс лист</a> 
</p> 
 
<ul id="menu"> 
 
</ul>

То есть a дублируются, но не оборачиваются в li (каждый из них).

Answer 1

В справке по функции wrap

This method returns the original set of elements for chaining purposes.

Этот метод возвращает оригинальный набор, для продолжения работы с ним.

Таким образом, делая после wrap -> appendTo в элемент добавляются клонированные ссылки, а не элементы li. Для исправления, добавлять нужно родителей текущих элементов. Их можно получить с помощью функции parent

Пример:

$('#toplinks a').clone().wrap('<li>').parent().appendTo('#menu');

#toplinks a { 
  display: block; 
} 
 
#menu li { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<p id="toplinks"> 
  <a>Главная</a> 
  <a>Бланк заказа</a> 
  <a>Прайс лист</a> 
</p> 
 
<ul id="menu"> 
 
</ul>

Answer 2

$('#toplinks a').clone().appendTo('#menu').wrap('<li></li>');

#toplinks a { 
  display: block; 
} 
 
#menu li { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<p id="toplinks"> 
  <a>Главная</a> 
  <a>Бланк заказа</a> 
  <a>Прайс лист</a> 
</p> 
 
<ul id="menu"> 
 
</ul>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему Slick показывает больше чем нужно, не адаптируется и вообще не реагирует на ширину окна и дает скролл?

Добрый день коллеги, Прошу вас помочь победить злополучный слайдер

252

javascript

Выводить страницу оплаты в iframe

Есть форма с данными, которая автоматически при нажатии кнопки submit отправляется на сайт robokassa (в action у формы стоит ссылка на страницу оплаты)Как...

250

javascript

Математическая библиотека для JavaScript

Есть ли какая-нибудь JavaScript-библиотека, которая включает в себя задание разного рода уравнений и умеет строить для них графики? Спасибо

333

javascript

Передать id кнопки на сервер

Есть json-файл, на его основе вывожу в браузер значения и возле каждого значения кнопку "Удалить" (c id "delete-user + порядковый номер")Далее мне нужно...

331