Замена элементов
Можно заменить один набор элементов другим, используя методы, описанные в таблице 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 заканчивает полным удалением элемента. Конечно, этого можно избежать, сузив выборку, но это не всегда возможно.
