Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2016, 10:17
Новичок на форуме
Отправить личное сообщение для Zaxap Посмотреть профиль Найти все сообщения от Zaxap
 
Регистрация: 02.11.2016
Сообщений: 8

Как обернуть каждый тег в несколько DIV содержащих по 1 атрибуту от этих самых тегов?
Есть html:
<p id="p1-id" class="p1-class" data-attribute="data-value">
	my
	<p сlass="p2-class1 p2-class2">
		super <i class="italic"><b>paragraph</b></i>
	</p>
</p>


Необходимо обернуть каждый тег в некоторое количество DIV, равное количеству атрибутов этих самых тегов. То есть, в итоге должно получиться нечто такое:
<div  id="p1-id">
	<div class="p1-class">
		<div data-attribute="data-value">
			<p>
				my
				<div сlass="p2-class1 p2-class2">
					<p>
						super
						<div class="italic">
							<i><b>paragraph</b></i>
						</div>
					</p>
				</div>
			</p>
		</div>
	</div>
</div>


Очень долго мучаюсь с этим и в итоге сталкиваюсь с непониманием того, как это вообще должно быть и/или работать.
Есть цикл, но он либо бесконечен, либо прерывается с ошибкой ввиду замены изначального тега создаваемым вокруг него DIV'ом => невозможно обернуть этот тег во второй-третий-...-n-ый DIV...

Как это осуществить?

Вот мой код, точнее, последний его вариант (нерабочий):
var els = document.body.getElementsByTagName("*"); // Получение вышеупомянутого html
var el = els[0], c = 0;
while (el) {
	if (el.hasAttributes()) {
		for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
			var attr = attrs[i], attr_name = attr.name;
			var wrapper = document.createElement("div");
			wrapper.setAttribute(attr_name, attr.value);

			var parent  = el.parentNode;
			var sibling = el.nextSibling;

			wrapper.appendChild(el);

			if (sibling) {
				parent.insertBefore(wrapper, sibling);
			} else {
				parent.appendChild(wrapper);
			}
		};
	}
	c++;
	el = els[c];
};
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2016, 11:06
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

удобно использовать http://api.jquery.com/wrap/
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2016, 11:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Zaxap,
Сообщение от Zaxap
Есть html:
а как быть если нет такого html?
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2016, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Pavel M.,
достаточно js
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2016, 11:17
Новичок на форуме
Отправить личное сообщение для Zaxap Посмотреть профиль Найти все сообщения от Zaxap
 
Регистрация: 02.11.2016
Сообщений: 8

Сообщение от Pavel M. Посмотреть сообщение
удобно использовать http://api.jquery.com/wrap/
Как видно, думаю, по моему коду, JQuery не используется вообще.
А код внутри цикла, вроде бы, как из функции wrap() из JQ, но оно и который вызывает "баги".

Даже если ошибаюсь, необходима помощь в решении именно для данного случая: несколько "оберток" создают либо цикличность, либо заменяют элемент в массиве (смотря как сделать)... а вот как обернуть один и тот же элемент в 3 "обертки", в каждой из которых будет по аттрибуту от оборачиваемого элемента - не понимаю
Ответить с цитированием
  #6 (permalink)  
Старый 08.11.2016, 11:20
Новичок на форуме
Отправить личное сообщение для Zaxap Посмотреть профиль Найти все сообщения от Zaxap
 
Регистрация: 02.11.2016
Сообщений: 8

рони,
как бы... HTML может быть любым. Если он содержит атрибуты, создается необходимое количество "оберток", равных числу атрибутов. Каждая из оберток содержит по одному атрибуту оборачиваемого элемента.
Тут неважен код, свои многочисленные попытки представил в конце первого поста с вопросом... а вот как сделать верно - не могу разобраться.
Ответить с цитированием
  #7 (permalink)  
Старый 08.11.2016, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Zaxap
getElements
для начала замените на querySelectorAll, и исправьте html или браузер сделает это за вас.
Ответить с цитированием
  #8 (permalink)  
Старый 08.11.2016, 11:26
Новичок на форуме
Отправить личное сообщение для Zaxap Посмотреть профиль Найти все сообщения от Zaxap
 
Регистрация: 02.11.2016
Сообщений: 8

рони, а в чем, собственно, разница между querySelectorAll("*") и getElementsByTagName("*"), кроме того, что второй вариант, по идее, быстрее?
И что вы подразумеваете под "исправьте html"? Как нужно исправить ПРИМЕР html-кода, именно пример, представленный для того, чтобы нагляднее показать проблему?
Как это все связано с проблемой в цикле, в моем JS-коде, который представил?

Последний раз редактировалось Zaxap, 08.11.2016 в 11:30.
Ответить с цитированием
  #9 (permalink)  
Старый 08.11.2016, 11:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Zaxap,
абзацы в абзацах не живут p в p ,
Сообщение от Zaxap
getElementsByTagName
изменяется с любым изменением DOM,
Сообщение от Zaxap
querySelectorAll
это снимок на момент поиска элементов.

Последний раз редактировалось рони, 08.11.2016 в 15:55.
Ответить с цитированием
  #10 (permalink)  
Старый 08.11.2016, 11:37
Новичок на форуме
Отправить личное сообщение для Zaxap Посмотреть профиль Найти все сообщения от Zaxap
 
Регистрация: 02.11.2016
Сообщений: 8

рони, спасибо большое, не знал, попробую решить проблему.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ng-template - Как добавить несколько шаблонов в один тег посредство ng-click A1x1On2015 Angular.js 0 02.02.2016 18:13
Обернуть каждый абзац в свой тег snovapavel Элементы интерфейса 2 08.01.2016 22:15
Как обернуть в div li? Aleksanderj Общие вопросы Javascript 5 08.05.2015 11:56
Как обернуть несколько элементов? Lutidza Общие вопросы Javascript 3 01.08.2014 18:05
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29