Question

i go to the site http://api.jquery.com/end/ just to understand how end() use and how it works. unfortunately i just do not understand what it does. so i need to know in what kind of situation end() should be used.

here is small example

<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('background-color', 'red')
         .end()
         .find('.bar')
         .css('background-color', 'green');

i just do not understand what kind of role end() function play here.

it would be great if someone help me to understand the usage of end() function with small & easy sample code. please help. thanks

Answer 1

This is explained pretty well in the documentation:

End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

It’s clearer if I render the code like so:

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

It means that what you’re setting background-color to green on is ul.first .bar, not ul.first .foo .bar. It undoes the .find('foo') filter in that call chain.

An equivalent would be:

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