Pro jQuery
Адам Фриман
Вставка сиблингов
Как вы можете догадаться, 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: Добавление сиблингов с использованием функции