Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah kaedah traversal dalam jquery?
Kaedah traversal ialah: 1. add(), digunakan untuk menambah elemen pada set elemen padanan 2. children(), digunakan untuk mengembalikan semua elemen anak langsung bagi elemen yang dipilih; ), digunakan untuk mengembalikan elemen nenek moyang pertama bagi elemen yang dipilih; eq(); 8. cari(); 9. pertama();
Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.
Ringkasan kaedah traversal JQuery
Fungsi traversal jQuery termasuk kaedah untuk menapis, mencari dan menggabungkan elemen.
| kaedah | Penerangan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| add() | Tambahkan elemen pada set elemen yang sepadan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| addBack() | Tambah set elemen sebelumnya pada set semasa | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| andSelf() | Ditamatkan dalam versi 1.8.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| children() | Mengembalikan semua elemen anak langsung bagi elemen yang dipilih | closest() | Mengembalikan elemen nenek moyang pertama bagi elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| contents() | Kembalikan Semua elemen anak langsung bagi elemen yang dipilih (termasuk teks dan nod ulasan) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| setiap() | Laksanakan fungsi untuk setiap elemen yang sepadan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| end() | Tamatkan operasi penapisan terkini dalam rantaian semasa dan kembalikan set elemen padanan kepada keadaan sebelumnya | eq() | Mengembalikan elemen dengan nombor indeks yang ditentukan bagi elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| filter() | Mengurangkan set elemen padanan kepada elemen baharu yang sepadan dengan pemilih atau nilai pulangan fungsi yang sepadan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| find() | Mengembalikan unsur turunan unsur yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| first() | Mengembalikan elemen pertama bagi elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| has() | Mengembalikan semua elemen yang mempunyai satu atau lebih elemen di dalamnya | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| is() | Menurut pemilih/elemen/jQuery Objek menyemak set elemen padanan dan mengembalikan benar jika terdapat sekurang-kurangnya satu elemen padanan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| last() | Mengembalikan elemen terakhir elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| last() | Mengembalikan elemen terakhir bagi elemen yang dipilih | td>||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| map() | Lepaskan setiap elemen dalam set padanan semasa kepada fungsi dan jana objek jQuery baharu yang mengandungi nilai pulangan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| next() | Mengembalikan elemen adik beradik seterusnya bagi elemen yang dipilih|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| nextAll() | Mengembalikan semua elemen adik beradik selepas elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| nextUntil() | Mengembalikan selepas setiap elemen antara dua parameter yang diberikan Semua elemen adik beradik | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| not() | Alih keluar elemen daripada set elemen yang sepadan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| offsetParent() | Mengembalikan elemen induk kedudukan pertama | parent() | Mengembalikan induk langsung bagi Elemen elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| parents() | Mengembalikan semua elemen nenek moyang bagi elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| parentsUntil() | Mengembalikan semua elemen nenek moyang antara dua parameter yang diberikan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prev() | Mengembalikan elemen adik-beradik sebelumnya yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prevAll() | Mengembalikan semua elemen adik-beradik sebelum elemen yang dipilih | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prevUntil() | Mengembalikan semua elemen adik-beradik sebelum setiap elemen antara dua parameter yang diberikan | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mengembalikan semua elemen adik-beradik bagi elemen yang dipilih | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| slice() | Mengurangkan set elemen padanan kepada kanak-kanak bagi julat yang ditetapkan Set |
Dua kaedah untuk merentasi elemen kanak-kanak
kaedah kanak-kanak(): Dapatkan elemen subset langsung di bawah elemen
kaedah find(): Dapatkan semua elemen subset (termasuk subset subset) di bawah elemen
Perbezaan:
kaedah child() Return Mengembalikan semua elemen anak langsung daripada elemen yang dipilih (elemen anak langsung, hanya cari anak lelaki dan bukan cucu (: maksudnya, tiada traversal rekursif)
Kaedah find() memperoleh setiap elemen dalam set elemen semasa Keturunan elemen (perhatikan bahawa kaedah find() mesti lulus parameter, jika tidak, ia akan menjadi tidak sah)
Contoh: Tanya semua elemen anak
<!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 cara untuk merentasi elemen adik beradik:
kaedah adik beradik(), terutamanya digunakan untuk mendapatkan semua elemen tahap yang sama bagi elemen tertentu
kaedah next() , digunakan terutamanya untuk mendapatkan elemen adik beradik seterusnya bagi elemen yang ditentukan
kaedah nextAll(), terutamanya digunakan untuk mendapatkan elemen adik beradik seterusnya elemen yang ditentukan Semua elemen
nextUntil() kaedah digunakan terutamanya untuk mendapatkan elemen adik-beradik seterusnya unsur yang ditentukan ini mesti berada di antara elemen yang ditentukan dan elemen yang ditetapkan oleh Kaedah nextUntil() Elemen
prev() kaedah digunakan terutamanya untuk mendapatkan elemen adik beradik peringkat atas bagi elemen yang dinyatakan >kaedah prevAll() digunakan terutamanya Digunakan untuk mendapatkan semua elemen adik beradik pada tahap sebelumnya bagi elemen yang ditentukan
kaedah prevUntil(), terutamanya digunakan untuk mendapatkan elemen adik beradik sebelumnya bagi yang ditentukan Elemen adik beradik ini mestilah Elemen yang ditentukan antara elemen dan elemen yang ditetapkan oleh kaedah prevUntil()
kaedah adik beradik()
<!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>next() Kaedah <!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>nextAll() kaedah
<!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>kaedah >nextUntil()
<!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>kaedah sebelum()
<!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>kaedah prevAll()
<!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>kaedah 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").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>kaedah setiap() dan map() boleh melintasi tatasusunan
setiap() melintasi tatasusunan
<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>map() melintasi tatasusunan 
<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>
1. setiap satu dalam tatasusunan
2 Melintasi elemen Dom
复制代码
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 4dan muncul Kopi, Susu, Soda pula <.>
<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> 3.setiap dan peta Perbandingan
Contoh berikut adalah untuk mendapatkan nilai ID setiap kotak berbilang; >
setiap kaedah:Tentukan tatasusunan kosong dan tambahkan nilai ID pada tatasusunan melalui setiap kaedah, akhirnya, selepas menukar tatasusunan menjadi a rentetan, maklumkan nilai;
kaedah peta:
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);
}) melaksanakan setiap :checkbox dan mengembalikan this.id dan menyimpannya secara automatik kembalikan nilai sebagai objek jQuery, dan kemudian gunakan kaedah get untuk menukarnya kepada tatasusunan Javascript asli , kemudian gunakan kaedah gabungan untuk menukarnya menjadi rentetan, dan akhirnya memberi amaran kepada nilai itu; 🎜>Apabila anda memerlukan nilai tatasusunan, gunakan kaedah peta, yang sangat mudah.
4. Gunakan setiap satu
$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);
})dalam jquery untuk menggelung melalui tatasusunan, menggunakan kedua-dua indeks elemen dan kandungan. (i ialah indeks, n ialah kandungan) Kod adalah seperti berikut:
Contoh objek, menggunakan kedua-dua nama ahli dan kandungan berubah. (i ialah nama ahli, n ialah kandungan pembolehubah) Kod adalah seperti berikut:
Contoh merentasi elemen dom, di sini elemen borang input digunakan sebagai contoh.
Jika anda mempunyai sekeping kod seperti ini dalam dom anda
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
}); maka anda gunakan setiap satu seperti berikut $.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});Kodnya adalah seperti berikut : <input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>
实现效果”回复”两个字只有在鼠标经过的时候才显示出来
<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前端视频】
Atas ialah kandungan terperinci Apakah kaedah traversal dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!