Книга: JavaScript. Подробное руководство, 6-е издание

19.8.2.2. Возврат к предыдущему выбору

19.8.2.2. Возврат к предыдущему выбору

Чтобы обеспечить возможность составления цепочек вызовов методов, большинство методов объекта jQuery возвращают объект, относительно которого они вызываются. Однако все методы, которые рассматривались в этом разделе, возвращают новые объекты jQuery. Они также могут включаться в цепочку вызовов, но вы должны иметь в виду, что методы, вызываемые в цепочке вслед за ними, будут оперировать другим множеством элементов, отличным от того, которое использовалось в начале цепочки.

Однако на самом деле ситуация несколько сложнее. Когда методы выбора, описанные здесь, создают и возвращают новый объект jQuery, они сохраняют в нем ссылку на прежний объект jQuery, на основе которого был порожден новый объект. В результате создается список, или стек объектов jQuery. Метод end() выталкивает объект на вершине этого стека и возвращает сохраненный объект jQuery. Вызов метода end() в цепочке восстанавливает множество выбранных элементов в предыдущее состояние. Взгляните на следующий фрагмент:

// Отыскать все элементы <div>, затем внутри множества выбранных элементов отыскать
// элементы <р>. Выделить элементы <р> цветом и затем окружить рамками элементы <div>.
// Сначала рассмотрим, как это сделать без цепочек вызовов методов
var divs = $("div");
var paras = divs.find("p");
paras.addClass("highlight");
divs.css( "border", " solid black 1px");
// А теперь то же самое, составив цепочку вызовов методов
$("div"). find("p").addClass("highlight").end().css("border", "solid black 1px");
// To же самое можно реализовать без вызова метода end(), просто переупорядочив операции
$("div").css("border"', "solid black 1рх”).find("р").addClass("highlight”);

Если вам когда-нибудь потребуется вручную определить множество выбранных элементов и обеспечить его совместимость с методом end(), передайте новое множество элементов в виде массива или в виде объекта, подобного массиву, методу pushStack(). Указанные элементы будут преобразованы в новое множество выбранных элементов, а предыдущее множество будет помещено в стек, откуда его можно будет извлечь вызовом метода end():
var sel = $("div”);              // Выбрать все <div>
sel.pushStack(document.getElementsByTagName("p")); // Заменить его множеством
                                                   // всех элементов <р>
sel.end(); // Восстановить множество элементов <div>

Теперь, когда мы познакомились с методом end() и со стеком, хранящим множества выбранных элементов, нам осталось познакомиться с еще одним методом. Метод andSelf() возвращает новый объект jQuery, включающий все элементы из текущего множества выбранных элементов плюс все элементы (за исключением дубликатов) из предыдущего множества. Метод andSelf() действует подобно методу add() и для него больше подошло бы имя «addPrev». В качестве примера рассмотрим следующий вариант реализации предыдущего примера: он выделяет цветом элементы <р> и вмещающие их элементы <div> и затем добавляет рамки к элементам <div>:
$("div").find("р").andSelf(). // Отыскать <p> в <div> и объединить их
addClass("highlight"). // Выделить их все цветом
  end().end(). // Вытолкнуть со стека дважды до $("div")
  css("border", "solid black 1px"); // Добавить рамки к элементам <div>

Оглавление книги