What is the usage of end in jquery

The function of end in jquery is to end the latest filtering operation in the current chain and restore the matching element set to its previous state. Its usage syntax is ".end()".

The operating environment of this article: windows7 system, jquery3.2.1 version, DELL G3 computer

#What is the usage of end in jquery?

jquery end() method ends the most recent filter operation in the current chain and restores the set of matching elements to its previous state.

Syntax

.end()

Detailed description

Most jQuery traversal methods operate on a jQuery object instance and generate a new object that matches a different set of DOM elements. When this happens, the new set of elements should be pushed onto the stack maintained in the object. Each successful filter method call pushes a new element onto the stack. If we need the old set of elements, we can use end() to pop the new set from the stack.

Suppose there is a pair of short lists in the page:

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

Example

Mainly jQuery will be more useful when using jQuery's chain attribute (command chain). If we don't use the command chain, we usually call the previous object through the variable name, so we don't need to operate the stack. But with end(), we can chain all the method calls together:

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

This chain of commands retrieves the items with class name foo in the first list and sets their background to red. end() will restore the object to the state before calling find(), so the second find() looks for '.bar' inside dca0a85f515854913184fc9b15104a03 rather than in the b50f8e6810c31b4d543db918bcbc30a7 and set the background of the matching element to green. The end result is that items 1 and 3 in the first list are set to a colored background, while the items in the second list have no change.

Recommended learning: "jquery video tutorial"

The above is the detailed content of What is the usage of end in jquery. For more information, please follow other related articles on the PHP Chinese website!