.end()Возвращает: jQuery
Описание: Завершает последнюю операцию фильтрации в текущей цепочке и возвращает набор сопоставленных элементов в их предыдущее состояние.
Большинство методов обхода DOM jQuery работают с экземпляром объекта jQuery и создают новый, сопоставляя другой набор элементов DOM. Когда это происходит, это как если бы новый набор элементов был помещён в стек, который хранится внутри объекта. Каждый последующий метод фильтрации помещает новый набор элементов в стек. Если нам нужен более ранний набор элементов, мы можем использовать end() для извлечения наборов из стека.
Предположим, что на странице есть несколько коротких списков:
<ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul> <ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li> </ul>
Метод end() полезен в основном при использовании свойств цепочки jQuery. Когда цепочка не используется, мы обычно можем просто вызвать предыдущий объект по имени переменной, поэтому нам не нужно манипулировать стеком. Однако с end(), мы можем объединить все вызовы методов:
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" ); Эта цепочка ищет элементы с классом foo только в первом списке и делает их фон красным. Затем end() возвращает объект в состояние до вызова find(), поэтому второй find() ищет '.bar' внутри <ul class="first">, а не только внутри элементов первого списка, и делает фон соответствующих элементов зелёным. В итоге элементы 1 и 3 первого списка имеют цветной фон, а у элементов второго списка нет.
Длинную цепочку jQuery можно визуализировать как структурированный блок кода, где методы фильтрации предоставляют открывающиеся скобки вложенных блоков, а методы end() закрывают их:
$( "ul.first" )
.find( ".foo" )
.css( "background-color", "red" )
.end()
.find( ".bar" )
.css( "background-color", "green" )
.end(); Последний end() не нужен, так как мы сразу же отбрасываем объект jQuery. Однако, когда код написан в такой форме, end() обеспечивает визуальную симметрию и чувство завершённости, делая программу, по крайней мере, для некоторых разработчиков, более читаемой, но с небольшим снижением производительности, так как это дополнительный вызов функции.
Примеры:
Выбирает все абзацы, находит элементы span внутри них и возвращает выбор обратно к абзацам.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>end demo</title>
<style>
p, div {
margin: 1px;
padding: 1px;
font-weight: bold;
font-size: 16px;
}
div {
color: blue;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>
Hi there <span>how</span> are you <span>doing</span>?
</p>
<p>
This <span>span</span> is one of
several <span>spans</span> in this
<span>sentence</span>.
</p>
<div>
Tags in jQuery object initially: <b></b>
</div>
<div>
Tags in jQuery object after find: <b></b>
</div>
<div>
Tags in jQuery object after end: <b></b>
</div>
<script>
jQuery.fn.showTags = function( n ) {
var tags = this.map(function() {
return this.tagName;
})
.get()
.join( ", " );
$( "b" ).eq( n ).text( tags );
return this;
};
$( "p" )
.showTags( 0 )
.find( "span" )
.showTags( 1 )
.css( "background", "yellow" )
.end()
.showTags( 2 )
.css( "font-style", "italic" );
</script>
</body>
</html> Демо:
Выбирает все абзацы, находит элементы span внутри них и возвращает выбор обратно к абзацам.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>end demo</title>
<style>
p {
margin: 10px;
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<script>
$( "p" )
.find( "span" )
.end()
.css( "border", "2px red solid" );
</script>
</body>
</html> 
