Описание: Заканчивает последнюю операцию фильтрации в текущей цепочке и возвращает набор совпавших элементов в предыдущее состояние.
.end()
Добавлена в версию: 1.0
Большинство методов jQuery обхода DOM работают на экземпляр объекта 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(), мы можем нанизывать все вызовы методов вместе:
Это цепочка поиска элементов с классом foo только в первом списке и превращения их фона в красный цвет. Затем end() возвращает объект в состояние до вызова find(), таким образом второй find() ищет '.bar' внутри <ul class="first">, не только внутри этого списка <li class="foo">,
и превращает фон соответствующих элементов в зеленый. Конечным результатом является то, что пункты 1 и 3 первого списка с цветным фоном, и ни один из элементов из второго списка.
Длинню цепочку jQuery можно представить в виде структурированных блоков кода, с фильтрацией методов обеспечения открытия вложенных блоков и методов end() их закрытия:
Последний end() не является необходимым, так как мы отбрасываем объект jQuery сразу после этого. Однако, если код написан в таком виде, end() обеспечивает визуальную симметрию и закрытие программы, по крайней мере в глазах некоторых разработчиков это является более удобным для чтения.
Примеры
Пример 1
Выделяет все параграфы, отыскивает в них блоки span и затем обратно возвращает выделение к параграфам.
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");
Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
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>
<style>
p, div { margin:1px; padding:1px; font-weight:bold;
font-size:16px; }
div { color:blue; }
b { color:red; }
</style>
</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>
</body>
</html>
Пример 2
Выделяет все параграфы, отыскивает в них блоки span и затем обратно возвращает выделение к параграфам.Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("p").find("span").end().css("border", "2px red solid");
});
</script>
<style>p { margin:10px; padding:10px; }</style>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
</body>
</html>
Была ли эта информация полезной?
