Главная страница   /   7.5. Замена элементов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7.5. Замена элементов

Можно заменить один набор элементов другим, используя методы, описанные в таблице 7-5.

Таблица 7-5: Методы для замены элементов
Метод Описание
replaceWith(HTML)
replaceWith(jQuery)
replaceWith(HTMLElement[])
Заменяют элементы в объекте jQuery указанным контентом
replaceAll(jQuery)
replaceAll(HTMLElement[])
Заменяют элементы, указанные в аргументе, элементами в объекте jQuery
replaceWith(function) Динамически заменяет элементы в объекте jQuery с использованием функции

Методы replaceWith и replaceAll работают одинаковым образом, за исключением того, что роли объекта jQuery и аргумента меняются местами. В листинге 7-19 представлены оба метода.

Листинг 7-19: Использование методов replaceWith и replaceAll
<script type="text/javascript">
	$(document).ready(function () {
		var newElems = $("<div class='dcell'/>")
			.append("<img src='orchid.png'/>")
			.append("<label for='orchid'>Orchid:</label>")
			.append("<input name='orchid' value='0' required />")
			.css("border", "thick solid red");

		$('#row1').children().first().replaceWith(newElems);

		$("<img src='carnation.png'/>").replaceAll('#row2 img')
			.css("border", "thick solid red");
	});
</script>

В этом скрипте я использую метод replaceWith, что заменить первый дочерний элемент в row1 div новым контеном (результатом этого является замена астры на орхидею). Я также использую метод replaceAll, чтобы заменить все элементы img, являющиеся потомками row2, на рисунок гвоздики. Результат работы скрипта можно увидеть на рисунке 7-14.

Рисунок 7-14: Замена контекста при помощи методов replaceWith и replaceAll

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

Можно заменить элементы динамически, если методу replaceWith добавить функцию. Этой функции не передается ни один аргумент, но переменная this устанавливается для обрабатываемого элемента. В листинге 7-20 представлен пример.

Листинг 7-20: Замена элементов с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		$('div.drow img').replaceWith(function () {
			if (this.src.indexOf("rose") > -1) {
				return $("<img src='carnation.png'/>").css("border", "thick solid red");
			} else if (this.src.indexOf("peony") > -1) {
				return $("<img src='lily.png'/>").css("border", "thick solid red");
			} else {
				return $(this).clone();
			}
		});
	});
</script>

В этом скрипте я заменяю элементы img, основываясь на их src атрибуте. Если src атрибут содержит rose, тогда я заменяю элемент img другим, отображающим carnation.png. Если src атрибут содержит peony, тогда я заменяю элемент img другим, отображающим lily.png. У обоих замененных элементов есть красная рамка, чтобы была четко видна их позиция в документе.

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

Рисунок 7-15: Замена элементов с использованием функции

Совет

Если вы не хотите заменять элемент, вы просто можете вернуть клон. Если вы не клонируете элемент, тогда jQuery заканчивает полным удалением элемента. Конечно, этого можно избежать, сузив выборку, но это не всегда возможно.