Главная страница   /   7.4. Вставка сиблингов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7.4. Вставка сиблингов

Как вы можете догадаться, jQuery также предлагает комплекс методов для вставки элементов в документ в качестве сиблингов (сестринских элементов) существующих элементов. В таблице 7-4 описаны эти методы.

Таблица 7-4: Методы для вставки сиблингов
Метод Описание
after(HTML)
after(jQuery)
after(HTMLElement[])
Вставляет указанные элементы в качестве следующих сиблингов для каждого элемента в объекте jQuery
before(HTML)
before(jQuery)
before(HTMLElement[])
Вставляет указанные элементы в качестве предыдущих сиблингов для каждого элемента в объекте jQuery
insertAfter(HTML)
insertAfter(jQuery)
insertAfter(HTMLElement[])
Вставляет элементы в объект jQuery в качестве следующих сиблингов для каждого элемента, указанного в аргументе
insertBefore(HTML)
insertBefore(jQuery)
insertBefore(HTMLElement[])
Вставляет элементы в объект jQuery в качестве предыдущих сиблингов для каждого элемента, указанного в аргументе
after(function)
before(function)
Вставляет сиблингов динамически с использованием функции

Методы before и after следуют тому же паттерну, который вы уже видели, когда вставляли другие виды элементов в документ. В листинге 7-16 содержится пример использования обоих методов.

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

		var lilyElems = $("<div class='dcell'/>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />");

		$(orchidElems).add(lilyElems).css("border", "thick solid red");

		$('#row1 div.dcell').after(orchidElems);
		$('#row2 div.dcell').before(lilyElems);
	});
</script>

В этом скрипте я создал новый набор элементов для орхидей и лилий и использовал их с методами before и after, чтобы вставить их в качестве сиблингов для каждого элемента класса dcell. Элементы для орхидеи вставлены как следующие сиблинги для всех элементов в row1, элементы для лилии вставлены как предыдущие сиблинги для всех элементов в row2. Результат работы скрипта можно увидеть на рисунке 7-12.

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

Вставка сиблингов из объекта jQuery

Методы insertAfter и insertBefore вставляют элементы в объект jQuery в качестве следующих или предыдущих сиблингов для элементов в аргументе метода. Это тот же функционал, как и у методов after и before, но отношение между объектом jQuery и аргументом обратное. В листинге 7-17 показано использование этих методов. Этот скрипт создает тот же эффект, что и на рисунке 7-12.

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

		var lilyElems = $("<div class='dcell'/>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />");

		$(orchidElems).add(lilyElems).css("border", "thick solid red");

		orchidElems.insertAfter('#row1 div.dcell');
		lilyElems.insertBefore('#row2 div.dcell');
	});
</script>

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

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

Листинг 7-18: Динамическая генерация сиблингов с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		$('#row1 div.dcell').after(function (index, html) {
			if (index == 0) {
				return $("<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");
			} else if (index == 1) {
				return $("<div class='dcell'/>")
					.append("<img src='lily.png'/>")
					.append("<label for='lily'>Lily:</label>")
					.append("<input name='lily' value='0' required />")
					.css("border", "thick solid red");
			}
		});
	});
</script>

В этом скрипте я использую аргумент index для генерации сиблингов, если индекс обрабатываемого элемента равен 0 или 1. Результат работы скрипта виден на рисунке 7-13.

Рисунок 7-13: Добавление сиблингов с использованием функции