jQuery next()同级，jQuery prev()-IGI

时间：2020-02-23 14:46:11 　来源:igfitidea点击:

今天，我们将研究jQuery next()和jQuery prev()函数。
这些是jQuery遍历函数，它们返回所选HTML元素的下一个和上一个同级元素。

jQuery next()同级

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

这是使用jQuery next()方法的一般语法：

selector.next([selectorExpression])

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

jQuery next()示例

以下示例演示了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>

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

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

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

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

jQuery prev()

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

这是使用jQuery prev()方法的常规语法：

selector.prev([selectorExpression])

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

jQuery prev()示例

以下示例演示了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>

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

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

jQuery next()同级，jQuery prev()