jQuery is a collection object. If you want to quickly find the element set of the sibling elements immediately following each element in the specified element set, you can use the next() method
to understand the node search relationship:
The following class="item-1" element is the red part, and the blue class="item-2" is its sibling element
<ul class="level-3"> ;
; <li class="item-1">1</li>
; <li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
next() has no parameters
Allows us to search through elements The immediate siblings of these elements are immediately followed in the collection, and a new jQuery object is created based on the matching element.
Note: jQuery is a collection object, so next matches the next sibling element of each element in the collection
next() method selectively accepts the same type of selector expression The formula
is also because jQuery is a collection object. It may be necessary to filter this collection object to find the target element, so it is allowed to pass a selector expression
Let's write an example code below. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 120px;
}
.left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
a {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>next方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：next无参数</button>
<button>点击：next传递表达式</button>
<script type="text/javascript">
$("button:first").click(function() {
$('.item-1').next().css('border', '1px solid red');
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-3的li
//然后筛选出第一个li，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue');
})
</script>
</body>
</html>Next Section