jQuery-Abfrage - end()-Methode

Beispiel

Wählen Sie alle Absätze aus, finden Sie die span-Elemente in diesen Absätzen und stellen Sie sie in die Absätze zurück, und stellen Sie die Absätze in eine 2-pixel dicke rote Umrandung ein:

$("p").find("span").end().css("border", "2px red solid");

亲自试一试

Definition und Verwendung

Die end()-Methode beendet die neueste Filterung in der aktuellen Kette und stellt die Sammlung von zugehörigen Elementen in den ursprünglichen Zustand zurück.

Syntax

.end()

Detaillierte Erklärung

Die meisten jQuery-AbfrageMethoden operieren auf einer jQuery-Objekteinstantz und erzeugen einen neuen Objekt, der eine neue Sammlung von DOM-Elementen entspricht. Wenn dies geschieht, sollte die neue Elementsammlung in den im Objekt erhaltenen Stapel eingefügt werden. Mit jeder erfolgreichen Filterung wird das neue Element in den Stapel gelegt. Wenn wir die alte Elementsammlung benötigen, können wir mit end() die neue Sammlung aus dem Stapel entfernen.

假设页面中有一对很短的列表:

<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>

例子 1

主要是在利用 jQuery 的链属性(命令链)时,jQuery 会非常有用。如果不使用命令链,我们通常通过变量名来调用之前的对象,这样我们就不需要操作堆栈了。然而,通过 end(),我们可以将所有方法调用串联在一起:

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

亲自试一试

这条命令链检索第一个列表中类名为 foo 的项目,并将它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态,所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ,而不是在列表的 <li class="foo"> 中查找,并将匹配元素的背景设置为绿色。最终的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景,而第二个列表中的项目没有任何变化。

例子 2

这条长长的 jQuery 链可以可视化为结构化的代码块,筛选方法打开嵌套代码块,而 end() 方法用来关闭代码块:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

亲自试一试

这个 end() 方法并不是必需的,因为我们随后会丢弃这个 jQuery 对象。然而,如果按照这种形式编写代码,end() 可以提供视觉上的对称性,以及使程序看起来更整洁的感觉,至少对于开发者来说更易于阅读,当然代价是进行额外的调用,会有一点性能损失。