Detailed explanation of jQuery's end() method

Detailed explanation of jQuery's end() method_jquery

WBOY

Release： 2016-05-16 15:50:15

Original

1256 people have browsed it

Definition and usage of end() method:

The

end() method can go back to the last "destructive" operation, that is, change the matching element list to the previous state.
If there are no destructive operations an empty set will be returned.
The concept of destructive operations: refers to any operation that changes the matched elements. Maybe everyone is vague about this concept. Here is an example:

$("li").css("color","red");

Copy after login

The CSS function in the above code is not a destructive operation, because the list of matching elements does not change, but the CSS properties of the text content in the element are changed.

$("li").find(".first")

Copy after login

The above code is a destructive operation because the list of matching elements has changed. For example, if there are three li elements, then the list of matching elements has three elements. However, after filtering using the find() method, there is only one matching element list. element, this means that a "destructive" operation has occurred.
Grammatical structure:

$(selector).end()

Copy after login

Example code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(".first").find(".div").css("color","green"); 
 $(".second").find(".div").end().css("color","blue"); 
 $(".third").find(".js").css("color","blue").end().css("color","red") 
}) 
</script>
</head>
<body>
<div>
 <ul class="first">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="second">
  <li>HTML专区</li>
  <li>Javascript专区</li>
  <li class="div">Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
 <ul class="third">
  <li>HTML专区</li>
  <li class="js">Javascript专区</li>
  <li>Div+Css专区</li>
  <li>Jquery专区</li>
 </ul>
</div>
</body>
</html>

Copy after login

The above is the entire content of this article, I hope you all like it.