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.

td>Mengembalikan elemen adik beradik seterusnya bagi elemen yang dipilihsiblings()

kaedah

Penerangan

add()

Tambahkan elemen pada set elemen yang sepadan

addBack()

Tambah set elemen sebelumnya pada set semasa

andSelf()

Ditamatkan dalam versi 1.8.

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把之前的元素集添加到当前集合中
andSelf()	在版本 1.8 中被废弃。addBack() 的别名
children()	返回被选元素的所有直接子元素
closest()	返回被选元素的第一个祖先元素
contents()	返回被选元素的所有直接子元素（包含文本和注释节点）
each()	为每个匹配元素执行函数
end()	结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
eq()	返回带有被选元素的指定索引号的元素
filter()	把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	返回被选元素的后代元素
first()	返回被选元素的第一个元素
has()	返回拥有一个或多个元素在其内的所有元素
is()	根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
last()	返回被选元素的最后一个元素
map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
next()	返回被选元素的后一个同级元素
nextAll()	返回被选元素之后的所有同级元素
nextUntil()	返回介于两个给定参数之间的每个元素之后的所有同级元素
not()	从匹配元素集合中移除元素
offsetParent()	返回第一个定位的父元素
parent()	返回被选元素的直接父元素
parents()	返回被选元素的所有祖先元素
parentsUntil()	返回介于两个给定参数之间的所有祖先元素
prev()	返回被选元素的前一个同级元素
prevAll()	返回被选元素之前的所有同级元素
prevUntil()	返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings()	返回被选元素的所有同级元素
slice()	把匹配元素集合缩减为指定范围的子集

Alias ​​​​of addBack()

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

map()

Lepaskan setiap elemen dalam set padanan semasa kepada fungsi dan jana objek jQuery baharu yang mengandungi nilai pulangan

next()

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>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</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>
			$(&#39;li.third-item&#39;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</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>

Pengetahuan lanjutan: penggunaan setiap

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  4

dan 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 :

5.Cari elemen berdasarkan ini dalam setiap

<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!