Pro jQuery
Адам Фриман
Вставка родительских элементов и элементов-предков
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
с функцией для динамического генерирования элементов