DeeDi - трезвые записки

end( )

Отменяет последнее деструктивное действие, возвращая набор элементов к его предыдущему состоянию (до деструктивной операции над набором). Если деструкция не проходила, то end() вернет пустой набор. Деструктивная операция это та, которая изменяет набор элементов jQuery - это любая из Traversing функций, возвращающая объект jQuery: add, andSelf, children, filter, find, map, next, nextAll, not, parent, parents, prev, prevAll, siblings, и slice, а также clone, appendTo, prependTo, insertBefore, insertAfter, и replaceAll. (из раздела Манипуляции).

Рассмотрим пример. Для примера нам потребуется дополнительная функция showTags, которая получает набор элементов, преобразовывает набор в строку с названием элементов, а затем внутри .example_j после контента выводит полученные названия тегов. Для более удобного прочтения полученные названия отделим от тех, которые будут получены при последующем вызове функции с помощью знака >>. Теперь мы можем работать дальше. Мы проводим деструктуризацию набора элементов и возращаем обратное состояние end() дважды. Эту строку я закомметировал для более удобного прочтения, ниже таже самая строка, но в ключевых местах с помощью ранее рассмотренной функции мы будем "перехватывать" названия тегов, которые в этот момент находятся в jQuery:

$(document).ready(function() {
jQuery.fn.showTags = function () {
var tags = this.map(function () {
return this.tagName;
})
.get().join(", ");
$(".example_j").append(tags + " >> ");
return this;
};

// $(".example_j").find("p").andSelf().addClass("j_border").end().end();

$(".example_j").showTags()
.find("p").showTags()
.andSelf().addClass("j_border").showTags()
.end().showTags()
.end().showTags();
});
Результат работы примера:

Параграф

Параграф

Думаю получилось наглядно. Сначала в набор попадает только div.example_j (отбрали спомощью $(".example_j") ), затем 2P (нашли с помощью find("p")), далее DIV и 2P (добавили предыдущий набор, который содержал DIV к текущему 2P - .andSelf() ), вот теперь делаем "шаг назад" end() и снова получаем 2P, и еще "шаг назад" и возращаемся к исходному состоянию - DIV.

HTML :
<div class="example_j">
<p>Параграф</p>
<p>Параграф</p>
</div>

Боковой текст: