Мы уже несколько раз говорили о небольших нововведениях в jQuery API, которые действительно очень хороши. Все хорошо продумано и доработано. Цепочка определенно попадает в эту категорию. Как только вы начнете использовать его и поймете, это станет совершенно естественным, как будто другого выхода быть не должно.
Основная идея состоит в том, что вы используете несколько методов подряд для одной коллекции элементов.
Например, скажем, после того, как я нажму кнопку, я хочу изменить класс, а также текст. Но внутри кнопки есть HTML.
Open
С помощью jQuery мы можем «связать» всю серию действий вместе.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Это возможно, потому что большинство методов jQuery, когда они используются в качестве установщика, возвращают набор элементов, точно такой же, как тот, для которого был вызван метод. Иногда этот набор точно такой же, как в случае с removeClass
и addClass
здесь, а иногда этот набор изменяется, как в случае с find
.
В примере, с которым мы работали в видео, мы также говорили о том, .end()
какой «отступает» на один уровень в цепочке.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Возможно, это лучше объясняет. Когда набор элементов изменился, я сделал отступ в первой строке и отметил изменение в комментарии. Затем, когда мы .end()
отступаем на один уровень. Это работает независимо от того, сколько раз вы меняли выбор. Все заканчивается, когда вы используете метод, который возвращает что-то отличное от набора элементов.