Méthode jQuery traversal next()
jQuery est un objet de collection. Si vous souhaitez trouver rapidement l'ensemble d'éléments frères qui suit immédiatement chaque élément dans l'ensemble d'éléments spécifié, vous pouvez utiliser la méthode next()
pour comprendre le n?ud. relation de recherche?:
L'élément class="item-1" suivant est la partie rouge, et le class bleu="item-2" est son élément frère
<ul class=" niveau-3"> ;
? <li class="item-1">1</li>
? <li class="item-2">2</ li>
<li class="item-3">3</li>
</ul>
next() n'a pas de paramètres
nous permet de rechercher parmi les éléments. Les frères et s?urs immédiats de ces éléments sont immédiatement suivis dans la collection et un nouvel objet jQuery est créé en fonction de l'élément correspondant.
Remarque?: jQuery est un objet de collection, donc next correspond à l'élément frère suivant de chaque élément de la collection
la méthode next() accepte sélectivement le même type d'expression de sélecteur La formule
c'est aussi parce que jQuery est un objet de collection. Il peut être nécessaire de filtrer cet objet de collection pour trouver l'élément cible, il est donc autorisé à passer une expression de sélection
écrivons un exemple de code ci-dessous. Le code est le suivant?:
<!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>點(diǎn)擊：next無參數(shù)</button>
<button>點(diǎn)擊：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
//然后篩選出第一個(gè)li，加上藍(lán)色的邊
$('.item-2').next(':first').css('border', '1px solid blue');
})
</script>
</body>
</html>. 
