Maison > Article > interface Web > Quelles sont les méthodes de parcours dans jquery ?
Quelles sont les méthodes de parcours dans jquery ?
- 青灯夜游original
- 2023-03-15 13:59:452045parcourir
Les méthodes de traversée sont : 1. add(), utilisée pour ajouter des éléments à l'ensemble des éléments correspondants ; 2. children(), utilisée pour renvoyer tous les éléments enfants directs de l'élément sélectionné 3. close(), utilisée Returns ; le premier élément ancêtre de l'élément sélectionné ; 4. contents(), utilisé pour renvoyer tous les éléments enfants directs de l'élément sélectionné ; 5. each(), utilisé pour exécuter la fonction pour chaque élément correspondant ; . find(); 9. first(); 10. is(); 11. last() et ainsi de suite.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.
Résumé de la méthode de traversée jQuery
La fonction de traversée jQuery comprend des méthodes de filtrage, de recherche et de concaténation d'éléments.
| Méthode | Description |
|---|---|
| add() | Ajouter des éléments à l'ensemble des éléments correspondants |
| addBack() | Ajouter l'ensemble d'éléments précédent à l'ensemble actuel |
| etSoi () | est obsolète dans la version 1.8. addBack() Alias |
| children() | Renvoie tous les éléments enfants directs de l'élément sélectionné |
| closest() | Renvoie le premier élément ancêtre de l'élément sélectionné |
| contents() | Renvoyer tous les éléments enfants directs de l'élément sélectionné (y compris les nœuds de texte et de commentaires) |
| each() | Exécuter la fonction pour chaque élément correspondant |
| end() | Terminer le plus récent dans le chaîne actuelle Opération de filtrage et renvoyer l'ensemble des éléments correspondants à l'état précédent |
| eq() | Renvoyer l'élément avec le numéro d'index spécifié de l'élément sélectionné |
| filter() | Réduire l'ensemble des correspondances elements to Un nouvel élément correspondant à la valeur de retour du sélecteur ou de la fonction correspondante |
| find() | Renvoie l'élément descendant de l'élément sélectionné |
| first() | Renvoie le premier élément de l'élément sélectionné |
| has () | Renvoie tous les éléments qui contiennent un ou plusieurs éléments |
| is() | Vérifie l'ensemble des éléments correspondants en fonction de l'objet sélecteur/élément/jQuery et renvoie true s'il y en a au au moins un élément correspondant |
| last() | Renvoie le dernier élément de l'élément sélectionné |
| map() | Passe chaque élément de l'ensemble correspondant actuel à la fonction et génère un nouvel objet jQuery contenant le retour value |
| next() | Renvoie l'élément frère suivant de l'élément sélectionné |
| nextAll() | Renvoie tous les éléments frères après l'élément sélectionné |
| nextUntil() | Renvoie la valeur entre deux éléments donnés Tous les éléments frères après chaque élément entre les paramètres |
| not() | Supprime l'élément de l'ensemble des éléments correspondants |
| offsetParent() | Renvoie le premier élément parent positionné |
| parent( ) | Renvoie l'élément parent direct de l'élément sélectionné |
| parents() | Renvoie tous les éléments ancêtres de l'élément sélectionné |
| parentsUntil() | Renvoie la valeur entre les deux paramètres donnés Tous les éléments ancêtres de |
| prev() | Renvoie l'élément frère précédent de l'élément sélectionné |
| prevAll() | Renvoie tous les éléments frères avant l'élément sélectionné |
| prevUntil() | Renvoie tous les éléments frères avant chacun élément entre les deux paramètres donnés |
| siblings() | Renvoie tous les éléments frères et sœurs de l'élément sélectionné |
| slice() | Correspondance L'ensemble d'éléments est réduit à un sous-ensemble de la plage spécifiée |
Deux méthodes pour parcourir les éléments enfants
Méthode children() : Obtenez les éléments de sous-ensemble directs sous cet élément
-
Méthode find() : Obtenez tous (y compris les sous-ensembles de sous-ensembles) sous cet élément) les éléments de sous-ensemble
Différence : la méthode
children() renvoie tous les éléments enfants directs de l'élément sélectionné (éléments enfants directs, recherche uniquement les fils et non les petits-enfants (: c'est-à-dire pas de parcours récursif)
La méthode find() La méthode obtient les descendants de chaque élément de la collection d'éléments actuelle (notez que pour la méthode find(), les paramètres doivent être passés, sinon ils seront invalides)
Exemple : interrogez tous les éléments enfants
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>
7 façons pour parcourir les éléments frères et sœurs Méthode :
siblings() méthode, principalement utilisée pour obtenir tous les éléments du même niveau de l'élément spécifié
next() méthode, principalement utilisée pour obtenir l'élément frère suivant de l'élément spécifié element
nextAll (), principalement utilisée pour obtenir tous les éléments du prochain frère de l'élément spécifié.
nextUntil(), principalement utilisée pour obtenir l'élément frère suivant de cet élément frère spécifié. doit être identique à nextUntil de l'élément spécifié. Les éléments entre les éléments définis par la méthode ()
prev(), principalement utilisée pour obtenir les éléments frères de niveau supérieur de l'élément spécifié
prevAll( ), principalement utilisée pour obtenir le niveau supérieur de l'élément spécifié. Tous les éléments frères et sœurs
-
prevUntil() sont principalement utilisés pour obtenir l'élément frère précédent de l'élément spécifié. Cet élément frère doit être l'élément situé entre l'élément spécifié. et l'élément défini par la méthode prevUntil () Méthode il()
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> <script> $("p").siblings(".selected").css("background", "yellow"); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').next().css('background-color', 'red'); </script> </body> </html>
méthode prevAll()
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script> $('li.third-item').nextAll().css('background-color', 'red'); </script> </body> </html>
méthode prevUntil() <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
<li class="start">li (类名为"start"的兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li class="stop">li (类名为"stop"的兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>
</body>
</html>
les méthodes each() et map() peuvent parcourir le tableau 
each() traverse le tableau
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>
map() Traverse le tableau
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>
</body>
</html>
Connaissances approfondies : utilisation de each
1. chacun dans le tableau
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="stop">li (类名为"stop"的兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>
</body>
</html> 
2. Traversez l'élément Dom
<script>
var arr = [1,3,5,7,9];
var obj = {0:1,1:3,2:5,3:7,4:9};
/**
* 利用jQuery的each静态方法遍历
* 第一个参数：当前遍历到的索引
* 第二个元素：遍历到的元素
* 注意：jQuery的each方法可以遍历伪数组
*/
$.each(arr,function(index,value){
console.log("jQuery-each方法遍历数组：",index,value);
})
$.each(obj,function(index,value){
console.log("jQuery-each方法遍历伪数组：",index,value);
})
</script>Le café apparaît l'un après l'autre, le lait, le soda3. Comparaison entre chacun et la carte
L'exemple suivant consiste à obtenir la valeur d'identification de chaque multi. -box;
each méthode : Définissez un tableau vide via chaque méthode, ajoutez la valeur ID au tableau ; enfin, après avoir converti le tableau en chaîne, alertez la valeur
<script>
var arr = [1,3,5,7,9];
var obj = {0:1,1:3,2:5,3:7,4:9};
/**
*1.利用原生JS的map方法遍历
*第一个参数：遍历到的元素
*第二个参数：当前遍历到的索引
*第三个参数：当前被遍历的数组
*注意：和原生的forEach方法一样，不能遍历伪数组
*/
arr.map(function(value,index,array){
console.log("原生map遍历数组:",index,value,array);
});
/**
obj.map(function(value,index,array){
console.log("原生map遍历伪数组:",index,value,array);
//Uncaught TypeError: obj.forEach is not a function
});
*/
/**
* 2.利用jQuery的each静态方法遍历
* 第一个参数：要遍历的数组
* 每遍历一个元素之后执行的回调函数
* 回调函数的参数：
* 第一个参数：遍历到的元素
* 第二个元素：当前遍历到的索引
* 注意：和jQuery的each方法一样可以遍历伪数组
*/
$.map(arr,function(value,index){
console.log("jQuery-map方法遍历数组：",index,value);
})
$.map(obj,function(value,index){
console.log("jQuery-map方法遍历伪数组：",index,value);
})
</script>
map ; méthode : Exécutez la case à cocher each: pour renvoyer this.id ; et renvoyez ces valeurs de retour, enregistrez-le automatiquement en tant qu'objet jQuery, puis utilisez la méthode get pour le convertir en un tableau Javascript natif, puis utilisez la méthode join pour convertissez-le en chaîne et enfin alertez la valeur
复制代码
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4Lorsque vous avez besoin d'une valeur de tableau, utilisez map La méthode est très pratique.
4. Utilisez each
dans jquery pour parcourir le tableau, en utilisant à la fois l'index et le contenu des éléments. (i est l'index, n est le contenu)
Le code est le suivant :
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>Exemple l'objet, en utilisant à la fois les noms de membres et le contenu des variables. (i est le nom du membre, n est le contenu de la variable) Le code est le suivant :
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
})Exemple de traversée d'éléments dom, ici un élément de formulaire de saisie est utilisé comme exemple. Si vous avez un morceau de code comme celui-ci dans votre dom
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
})Ensuite, vous utilisez chacun comme suit Le code est le suivant :
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
5. Trouvez des éléments dans chacun selon cela
.
实现效果”回复”两个字只有在鼠标经过的时候才显示出来
<ol class="commentlist">
<li class="comment">
<div class="comment-body">
<p>嗨，第一层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div>
<ul class="children">
<li class="comment">
<div class="comment-body">
<p>第二层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div></li>
</ul>
</li>
</ol>js代码如下
$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();
},function(){
$(this).find(".comment-reply-link").hide();
});
实现效果，验证判断题是否都有选择
html
<ul id="ulSingle">
<li class="liStyle">
1. 阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
<!--begin选项-->
<ul>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_0">A </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_1">B </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /></li>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_2">C </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
</ul>
<!--end选项-->
<br />
</li>
</ul>js代码
//验证单选题是否选中
$("ul#ulSingle>li.liStyle").each(function (index) {
//选项个数
var count = $(this).find("ul>li>:checkbox").length;
var selectedCount = 0
for (var i = 0; i < count; i++) {
if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
selectedCount++;
break;
}
}
if (selectedCount == 0) {
$(this).find("label#selectTips").show();
return false;
}
else {
$(this).find("label#selectTips").hide();
}
})ps:传说中attr("property", "value");在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");
6.官方解释
以下是官方的解释：
jQuery.each(object, [callback])
概述
通用例遍方法，可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
参数
objectObject ：需要例遍的对象或数组。
callback (可选)Function ：每个成员/元素执行的回调函数。
【推荐学习：jQuery视频教程、web前端视频】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!