jQuery end（）函数示例

最新推荐文章于 2023-11-08 11:16:48 发布

cunchi4221

最新推荐文章于 2023-11-08 11:16:48 发布

阅读量216

点赞数

文章标签： css js java html javascript ViewUI

原文链接：https://www.journaldev.com/5410/jquery-end-function-example

版权

In this post, we are going to discuss about one of the rarely used but a powerful technique in jQuery. jQuery API provides a powerful technique called end(), which is a very handy method while writing jQuery applications.

在本文中，我们将讨论jQuery中一种很少使用但功能强大的技术。 jQuery API提供了一种称为end（）的强大技术，这是编写jQuery应用程序时非常方便的方法。

jQuery结束 (jQuery end)

The end() method ends the most recent filtering operation in the current chain, and return the matched set of elements to its previous state.This method does not take any arguments.

end（）方法结束当前链中最近的过滤操作，并将匹配的元素集返回其先前状态。此方法不带任何参数。

Here is the general syntax for using end():

这是使用end（）的一般语法：

operations.end()
operation.end（）

jQuery end（）示例 (jQuery end() example)

Following example demonstrates the jQuery end() usage.

以下示例演示了jQuery end（）的用法。

<!doctype html>
<html>
<head>
<title>jQuery Traversing end</title>
<style>
    .highlight{
       background: yellow;
     }
   
    div{
      display: block;
      border: 3px solid black;
      color: red;
      padding: 5px;
      margin: 25px;
      width:250px;
     }
    span{
      display: block;
      border: 3px solid green;
      color: black;
      padding: 5px;
      margin: 25px;
      width:200px;
     }
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>jQuery find() demo</h2>
<button>Click</button>
<div>div
<span id="span1">Span 1</span>
<span id="span2">Span2</span>
</div>
<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
           .find("#span2") .css("background-color", "red").end()
          .animate({height: 250});
});
</script>
</body>
</html>

In this example, look at this script section which performs the intended operations in the above code.

在此示例中，请查看此脚本部分，该脚本部分执行上述代码中的预期操作。

<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
           .find("#span2") .css("background-color", "red").end()
          .animate({height: 250});
});
</script>

The operations start with a button click. At first, find() method is used to get the span element having id=span1 and changes its color to yellow. Then an end() method is called which pops out the last filtering options on the div from the stack. Now it is free for another operation. Then it finds span2 and changes the color to red. Again, end method is called to free up the stack. Finally, we animate div with the height attribute.

操作从单击按钮开始。首先，使用find（）方法获取id=span1的span元素，并将其颜色更改为黄色。然后调用end（）方法，该方法从堆栈中弹出div上的最后一个过滤选项。现在，它可免费用于其他操作。然后找到span2并将颜色更改为红色。再次，调用end方法以释放堆栈。最后，我们使用height属性为div设置动画。

It would have looked like the below scripts to carry out the above operations without the end() method.

如果不使用end（）方法，执行以下操作将看起来像下面的脚本。

<script>
$("button").click(function(){
 var div = $( "div" );
    div.find( "#span1" ).addClass("highlight");
     div.find("#span2") .css("background-color", "red");
       div.animate({height: 250});
});
</script>

要么

<script>
$("button").click(function(){
    $( "div" ).find( "#span1" ).addClass("highlight");
     $( "div" ).find("#span2") .css("background-color", "red");
       $( "div" ).animate({height: 250});
});
</script>

This is what jQuery end() method do when you manipulate a single element like div used in the above code. Therefore, try using end method from here on. You can now get rid of the unwanted lines of code from your application by using end() method.

这是当您操纵上述代码中使用的div等单个元素时jQuery end（）方法所做的事情。因此，从这里开始尝试使用end方法。现在，您可以使用end（）方法摆脱应用程序中不需要的代码行。

You can try it yourself by clicking on the below button.

您可以单击下面的按钮自己尝试。

演示地址

That’s all for now and you will see some interesting tricks in jQuery in the coming posts.

到此为止，您将在接下来的文章中看到jQuery中的一些有趣技巧。