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>点击：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>.
section suivante