jquery prev_jQuery next（）同级，jQuery prev（）

cunchi4221

于 2020-07-13 07:52:55 发布

阅读量451

点赞数 1

文章标签：字符串 js css jquery html ViewUI

原文链接：https://www.journaldev.com/5258/jquery-next-sibling-jquery-previous

版权

jquery prev

Today we will look into jQuery next() and jQuery prev() functions. These are jQuery traversing functions that returns the next and previous sibling element of the selected HTML element. Here we are going to look more about these methods.

今天，我们将研究jQuery next（）和jQuery prev（）函数。这些是jQuery遍历函数，它们返回所选HTML元素的下一个和上一个同级元素。在这里，我们将更多地了解这些方法。

jQuery next（）同级 (jQuery next() sibling)

jQuery next() function returns the next sibling element of the selected element. We can provide an optional selector parameter to this method and the next() method will return the sibling element only if there is a matching selector.

jQuery next（）函数返回所选元素的下一个同级元素。我们可以为此方法提供一个可选的选择器参数，只有在存在匹配的选择器时，next（）方法才会返回同级元素。

Here is the general syntax for using jQuery next() method:

这是使用jQuery next（）方法的一般语法：

selector.next( [selectorExpression] )
selector.next（[ selectorExpression ]）

selectorExpression is an optional string parameter passed to the method.

selectorExpression是传递给方法的可选字符串参数。

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

The following example demonstrates the jQuery next() usage.

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

<html>
<head>
<title>jQuery next sibling example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
<style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    border: 1px black solid;
    padding: 3px;
  }
</style>
 
</head>
<body>
 
<p><button>Move to Next</button></p> 
<div id="start">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
 
  
<script>
var $currDiv = $( "#start" );
$currDiv .css( "background-color", "red" );
$( "button" ).click(function() {
  $currDiv  = $currDiv .next();
  $( "div" ).css( "background-color", "" );
  $currDiv .css( "background-color", "red" );
});
</script>
  
</body>
</html>

In this example, We set the background color of the first div element with id="start" to red color. jQuery next() method triggers when the button is clicked and it starts traversing through the DOM elements.

在此示例中，我们将id="start"的第一个div元素的背景色设置为红色。 jQuery next（）方法在单击按钮时触发，并开始遍历DOM元素。

jQuery next() method will return the div2 on the first click and changes the background color to red. Now div2 is the current element and clicking the next button will return the div3 and so on. This is how jQuery next method works.

jQuery next（）方法将在第一次单击时返回div2，并将背景色更改为红色。现在div2是当前元素，单击下一步按钮将返回div3，依此类推。这就是jQuery next方法的工作方式。

Below is the output of jQuery next example.

下面是jQuery下一个示例的输出。

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

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

演示地址

jQuery prev（） (jQuery prev())

jQuery prev() method returns the previous sibling element of the selected element. We can provide an optional selector parameter to this method and the prev() method will return the sibling element only if there is a matching selector.

jQuery prev（）方法返回所选元素的上一个同级元素。我们可以为此方法提供可选的选择器参数，并且只有在存在匹配的选择器时，prev（）方法才会返回同级元素。

Here is the general syntax for using jQuery prev() method:

这是使用jQuery prev（）方法的常规语法：

selector.prev( [selectorExpression] )
选择器.prev（[ 选择器表达式 ]）

selectorExpression is an optional string parameter passed to the method.

selectorExpression是传递给方法的可选字符串参数。

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

The following example demonstrates the jQuery prev() usage.

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

<html>
<head>
<title>jQuery previous sibling example</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    border: 1px black solid;
    padding: 3px;
  }

 p {
    clear: left;
    margin: 10px;
  }
</style>

</head>
<body>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div id="startPrev">div6</div>
<p><button>Move to Previous Sibling</button></p> 

 
<script>
var $currDiv = $( "#startPrev" );
$currDiv .css( "background", "red" );
$( "button" ).click(function() {
  $currDiv  = $currDiv .prev();
  $( "div" ).css( "background", "" );
  $currDiv .css( "background", "red" );
});
</script>
 
</body>
</html>

In this example, We set the background color of the last div element with id="startPrev" to red color. jQuery prev() method triggers when the button is clicked and it starts traversing through the DOM elements.

在此示例中，我们将id="startPrev"的最后一个div元素的背景色设置为红色。 jQuery prev（）方法在单击按钮时触发，并开始遍历DOM元素。

The prev() method will return the div5 on the first click and changes the background color to red. Now div5 is the current element and clicking the prev button will return the div4 and so on. This is how jQuery prev() method works.

prev（）方法将在第一次单击时返回div5，并将背景色更改为红色。现在div5是当前元素，单击prev按钮将返回div4，依此类推。这就是jQuery prev（）方法的工作方式。

Below is the output of jQuery previous sibling example.

以下是jQuery先前同级示例的输出。

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

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

演示地址

That’s all for jQuery next() and prev() functions to get the next sibling and previous sibling of HTML elements. We will look into more jQuery traversing methods in coming posts.

这就是jQuery next（）和prev（）函数的全部内容，以获取HTML元素的下一个同级和上一个同级。在接下来的文章中，我们将研究更多的jQuery遍历方法。