jquery 遍历 之 ---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()不用写)，不写看着整齐，易读，写了会增加一部分开销。