Pro jQuery
Адам Фриман
Изменение и возвращение к предыдущей выборке
jQuery сохраняет внутренний стек, если вы меняете выборку с использованием цепочки методов, и вы можете использовать это, применив пару методов, описанных в таблице 6-7.
Таблица 6-7: Методы для использования стека выборки
Метод | Описание |
end() |
Выводит текущую выборку из стека и возвращается к предыдущей выборке |
andSelf() |
Добавляет предыдущую выборку к текущей выборке |
Можно использовать метод end
, чтобы вернуться к предыдущей выборке, что позволит выбрать некоторые элементы, расширить или сузить выборку, совершить некоторые операции, а потом вернуться к исходной выборке, как показано в листинге 6-9.
Листинг 6-9: Использование метода end
...
<script type="text/javascript">
$(document).ready(function () {
$('label').first().css("border", "thick solid blue")
.end().css("font-size", "1.5em");
});
</script>
...
В этом скрипте я начал с выборки всех элементов label
в документе. Затем я сократил выборку, вызвав метод first
(чтобы получить первый подходящий элемент), а потом установил значение для свойства border
, используя метод css
.
Потом я вызвал метод end
, чтобы вернуться к предыдущей выборке (это возвращает нас от первого элемента label
обратно ко всем элементам label
), а затем я снова вызвал метод css
, на этот раз чтобы указать значение для свойства font-size
. Результат работы этого скрипта можно увидеть на рисунке 6-6.
Рисунок 6-6: Использование метода end
Метод andSelf
добавляет содержание предыдущей выборки по стеку к текущей выборке. В листинге 6-10 показано использование метода addSelf
.
Листинг 6-10: Использование метода addSelf
...
<script type="text/javascript">
$(document).ready(function () {
$('div.dcell').children('img')
.andSelf().css("border", "thick solid blue");
});
</script>
...
В этом примере я выбрал все элементы div
, которые являются членами класса dcell
, а потом использовал метод children
, чтобы выбрать все элементы img
, являющимися их дочерними элементами (о методе children
я расскажу подробно в разделе "Навигация по DOM" далее в этой главе). Затем я вызвал метод andSelf
, который объединил предыдущую выборку (элемент div
) и текущую выборку (элементы img
) в одном объекте jQuery
. И наконец, я вызвал метод css
, чтобы установить рамку для выбранных элементов. Результат работы этого скрипта можно увидеть на рисунке 6-7.
Рисунок 6-7: Использование метода andSelf