jQuery traversal next() method
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無參數(shù)</button>
<button>點擊：next傳遞表達(dá)式</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，加上藍(lán)色的邊
$('.item-2').next(':first').css('border', '1px solid blue');
})
</script>
</body>
</html> 
