jquery 遍历之 ---end()方法

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mrgong/p/3770774.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用 jQuery 的 end() 方法来优化选择器的使用，通过实例对比展示了 end() 方法在选择元素和设置样式方面的应用技巧。

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

比如要查找 first 下的 class 为 foo 的元素并将其color设置为red。通常如果我们接着往下写

$('ul.first').find('.foo').css('color', 'red').find(".bar").css('color', 'red')

那么

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

没有什么效果，如果我们改成

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

<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链条属性，而重新开始查询。

因此我们可以这么写

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

代码很对称(其实最后一个end()不用写)，不写看着整齐，易读，写了会增加一部分开销。

转载于:https://www.cnblogs.com/mrgong/p/3770774.html

jquery 遍历 之 ---end()方法

jquery 遍历之 ---end()方法