.end()
.end() 返回: jQuery
描述: 終止在當(dāng)前鏈的最新過濾操作,并返回匹配的元素集合為它以前的狀態(tài)。
version added: 1.0.end()
最具jQuery的DOM遍歷方法操作一個jQuery對象的實例,產(chǎn)生一個新的,當(dāng)發(fā)生這種情況,這好像是一套新的元素推到一個堆棧里面的對象維護(hù)。每個連續(xù)的過濾方法推到一個新的元素堆棧設(shè)置。如果我們需要一個較舊的元素集,我們可以使用end()彈出套后退的堆棧。
假設(shè)我們有一個頁面上的幾個候選名單:
<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()方法非常有用,當(dāng)主要利用jQuery的鏈接屬性。當(dāng)不使用鏈,我們通??梢灾徽{(diào)用了一支由變量名前面的對象,所以我們并不需要操作堆棧。隨著end()雖然,我們可以串在一起的所有方法調(diào)用:
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');
This chain searches for items with the class foo within the first list only and turns their backgrounds red. Then end() returns the object to its state before the call to find(), so the second find() looks for '.bar' inside <ul class="first">, not just inside that list's <li class="foo">, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.
A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and end() methods closing them:
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'green')
.end();
The last end() is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the end() provides visual symmetry and closure—making the program, at least to the eyes of some developers, more readable.
Examples:
Example: Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
p, div { margin:1px; padding:1px; font-weight:bold;
font-size:16px; }
div { color:blue; }
b { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.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>
Demo:
Example: Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>p { margin:10px; padding:10px; }</style>
<script src="http://code.jquery.com/jquery-latest.min.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>