Главная страница   /   7.3. Вставка родительских элементов и элементов-предков (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7.3. Вставка родительских элементов и элементов-предков

jQuery предоставляет целый набор методов для вставки элементов в качестве родительских или элементов-предков для других элементов. Это явление известно как враппинг (потому что один элемент "обернут" другим). В таблице 7-3 представлены эти методы.

Таблица 7-3: Методы для враппинга элементов
Метод Описание
wrap(HTML)
wrap(jQuery)
wrap(HTMLElement[])
Оборачивает указанные элементы вокруг каждого элемента в объекте jQuery
wrapAll(HTML)
wrapAll(jQuery)
wrapAll(HTMLElement[])
Оборачивает указанные элементы вокруг набора элементов в объекте jQuery (как одну группу)
wrapInner(HTML)
wrapInner(jQuery)
wrapInner(HTMLElement[])
Оборачивает указанные элементы вокруг содержания элементов в объекте jQuery
wrap(function)
wrapInner(function)
Оборачивает элементы динамически с использованием функции

Совет

Дополнением к методам враппинга является метод unwrap, который я опишу в разделе "Удаление элементов" далее в этой главе.

Если вы совершаете враппинг, вы можете назначить несколько элементов в качестве аргументов, но вы должны убедиться, что есть только один внутренний элемент. В противном случае jQuery не сможет понять, что делать. Это обозначает, что каждый элемент в аргументе метода должен иметь не больше одного родителя и не больше одного дочернего элемента. В листинге 7-11 показано использование метода wrap.

Листинг 7-11: Использование метода wrap
<script type="text/javascript">
	$(document).ready(function () {
		var newElem = $("<div/>").css("border", "thick solid red");
		$('div.drow').wrap(newElem);
	});
</script>

В этом скрипте я создаю новый элемент div и использую метод css для указания значения CSS свойства border. Затем я использую метод wrap, чтобы вставить элемент div в качестве родительского для всех элементов label в документе. Результат работы скрипта можно увидеть на рисунке 7-7.

Рисунок 7-7: Использование метода wrap для добавления родительского элемента

Элементы, которые вы передаете в качестве аргумента методу wrap, вставляются между каждым элементом в объекте jQuery и его текущим родительским элементом. Вот, например, фрагмент HTML:

...
<div class="dtable">
	<div id="row1" class="drow">
		...
	</div>
	<div id="row2" class="drow">
		...
	</div>
</div>
...

изменен следующим образом:

...
<div class="dtable">
	<div style="...style properties...">
		<div id="row1" class="drow">
			...
		</div>
	</div>
	<div style="...style properties...">
		<div id="row2" class="drow">
			...
		</div>
	</div>
</div>
...

Враппинг группы элементов

Если вы используете метод wrap, новые элементы клонируются, и каждый элемент в объекте jQuery получает свой собственный новый родительский элемент. Можно вставить один родительский элемент для нескольких элементов, используя метод wrapAll, как показано в листинге 7-12.

Листинг 7-12: Использование метода wrapAll
<script type="text/javascript">
	$(document).ready(function () {
		var newElem = $("<div/>").css("border", "thick solid red");
		$('div.drow').wrapAll(newElem);
	});
</script>

Единственным изменением в этом скрипте является использование метода wrapAll. Результат можно увидеть на рисунке 7-8.

Рисунок 7-8: Использование метода wrapAll

Новый элемент используется для вставки общего родительского элемента для выбранных элементов так, что HTML изменен следующим образом:

...
<div class="dtable">
	<div style="...style properties...">
		<div id="row1" class="drow">
			...
		</div>
		<div id="row2" class="drow">
		</div>
	</div>
</div>
...

Нужно осторожно использовать этот метод. Если у выбранных элементов нет общего родительского элемента, тогда новый элемент вставляется в качестве родительского для первого выбранного элемента. Потом jQuery передвигает все остальные выбранные элементы так, что они становятся сиблингами для первого. В листинге 7-13 представлен скрипт, в котором этот метод используется таким образом.

Листинг 7-13: Использование wrapAll для элементов без общего родительского элемента
<script type="text/javascript">
	$(document).ready(function () {
		var newElem = $("<div/>").css("border", "thick solid red");
		$('img').wrapAll(newElem);
	});
</script>

Я выбрал в документе элементы img, и ни у одного из них нет общего "родителя". На рисунке 7-9 можно увидеть результат этого скрипта. Новый элемент div был вставлен в документ в качестве "родителя" для рисунка астры, а все остальные рисунки были вставлены как сиблинги.

Рисунок 7-9: Использование wrapAll для элементов без общего родительского элемента

Враппинг содержания элементов

Метод wrapInner оборачивает элементы вокруг содержания элементов в jQuery (в отличие от самих элементов). В листинге 7-14 показан пример.

Листинг 7-14: Использование метода wrapInner
<script type="text/javascript">
	$(document).ready(function () {
		var newElem = $("<div/>").css("border", "thick solid red");
		$('.dcell').wrapInner(newElem);
	});
</script>

Метод wrapInner вставляет новые элементы между элементами в объекте jQuery и их ближайшими дочерними элементами. В этом скрипте я выбираю элементы, которые принадлежат классу dcell и оборачиваю их содержание новым элементом div. Результат можно увидеть на рисунке 7-10.

Рисунок 7-10: Использование метода wrapInner

Немного отвлекусь и скажу, что можно достичь результата метода wrapInner, используя append. Просто для информации, вот эквивалентный скрипт:

<script type="text/javascript">
	$(document).ready(function () {
		var newElem = $("<div/>").css("border", "thick solid red");
		$('.dcell').each(function (index, elem) {
			$(elem).append(newElem.clone().append($(elem).children()));
		});
	});
</script>

Я не предлагаю вам использовать такой подход (метод wrapInner проще для чтения и более удобный), но мне кажется, что это хороший пример того, как можно использовать jQuery, чтобы решить одну и ту же задачу разными способами.

Враппинг элементов с использованием функции

Методам wrap и wrapInner можно передать функцию, чтобы динамически генерировать элементы. Единственным аргументом этой функции является индекс элемента в выбранных элементах. Специальная переменная this указывает на элемент, который обрабатывается. В скрипте листинга 7-15 показан пример динамического враппинга.

Листинг 7-15: Динамический враппинг элементов
<script type="text/javascript">
	$(document).ready(function () {
		$('.drow').wrap(function (index) {
			if ($(this).has('img[src*=rose]').length > 0) {
				return $("<div/>").css("border", "thick solid blue");
			} else {
				return $("<div/>").css("border", "thick solid red");
			}
		});
	});
</script>

В этом примере я использую функцию с методом wrap, чтобы подогнать новый родительский элемент, основываясь на потомках каждого из выбранных элементов. Результат работы скрипта можно увидеть на рисунке 7-11.

Рисунок 7-11: Использование метода wrap с функцией для динамического генерирования элементов