コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > jQueryのトラバーサルメソッドとは何ですか?

jQueryのトラバーサルメソッドとは何ですか?

青灯夜游
リリース： 2023-03-15 13:59:45
オリジナル
2108 人が閲覧しました

トラバーサル メソッドは次のとおりです: 1. add()、一致する要素のセットに要素を追加するために使用されます; 2.children()、選択された要素のすべての直接の子要素を返すために使用されます; 3.most() ) )、選択された要素の最初の祖先要素を返すために使用されます; 4. content()、選択された要素のすべての直接の子要素を返すために使用されます; 5. each()、一致する要素ごとに関数を実行するために使用されます; 7 、eq(); 8. find(); 9. first(); 10. is(); 11. last() など。

jQueryのトラバーサルメソッドとは何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jQuery トラバーサル メソッドの概要

jQuery トラバーサル関数には、要素のフィルタリング、検索、および連結のためのメソッドが含まれています。

#メソッド説明add()要素を一致するものに追加します。 element コレクション内addBack()前の要素セットを現在のコレクションに追加しますandSelf() ##children()##最も近い()選択した要素の最初の祖先要素を返しますcontents()選択した要素のすべての直接の子要素を返します(テキスト ノードとコメント ノード)each()一致する要素ごとに関数を実行しますend()現在のチェーン内の最新のフィルタリング操作を終了し、一致する要素のセットを前の状態に戻しますeq()要素を返します選択した要素の指定されたインデックス番号を使用します。filter()一致する要素のセットを、セレクターまたは一致する関数の戻り値に一致する新しい要素に縮小します。 find()選択した要素の子孫要素を返しますfirst()選択した要素を返します。 最初の要素#has()内部に 1 つ以上の要素を持つすべての要素を返しますis()selector/element/jQuery オブジェクトに基づいて一致する要素のセットを確認し、一致する要素が少なくとも 1 つある場合は true を返しますlast ()選択した要素の最後の要素を返しますmap() 現在の一致セット内の各要素を関数に渡し、生成します戻り値 新しい jQuery オブジェクト選択した要素の次の兄弟要素を返します##nextAll( ) 選択した要素の後のすべての兄弟要素を返しますnextUntil()指定された 2 つのパラメータ間の各要素を返します要素の後のすべての兄弟要素 間の各要素の前のすべての兄弟要素##siblings()選択した要素のすべての兄弟要素を返しますslice()一致する要素のセットをサブセットに縮小します指定された範囲#

子要素を走査するための 2 つのメソッド

  • children() メソッド: 要素の下にある直接のサブセット要素を取得します

  • #find() メソッド: 要素の下にあるすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。

違い:

children() メソッド Return 直接の子要素をすべて返します。選択した要素の (直接の子要素、孫ではなく息子のみを検索します (つまり、再帰的に走査しません)


find() メソッドは、現在の要素コレクション内の各要素を取得します要素の子孫 (find() メソッドはパラメータを渡す必要があることに注意してください。そうでない場合は無効になります)

例: すべての子要素をクエリする

<!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>
ログイン後にコピー

jQueryのトラバーサルメソッドとは何ですか?

兄弟要素を走査する 7 つのメソッド:

  • siblings() メソッド。主に、指定された要素の同じレベルのすべての要素を取得するために使用されます

    • #next() メソッド、主に指定された要素の次の兄弟要素を取得するために使用されます

    • nextAll() メソッド、主に次の兄弟レベルのすべての要素を取得するために使用されます指定された要素の

    • nextUntil() メソッドは主に、指定された要素の次の兄弟要素を取得するために使用されます。この兄弟要素は、指定された要素と、によって設定された要素との間の要素である必要があります。 nextUntil() メソッド

    • prev() メソッド、主に指定された要素の上位レベルの兄弟要素を取得するために使用されます。 ) メソッド (主に使用) 指定された要素の前のレベルにあるすべての兄弟要素を取得します。

    • prevUntil() メソッドは主に、指定された要素の前の兄弟要素を取得するために使用されます。兄弟要素は指定した要素と同じである必要があります。 prevUntil() メソッドで設定された要素間の要素

  • ##siblings() メソッド
    • <!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() メソッド
    • <!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() メソッドjQueryのトラバーサルメソッドとは何ですか?

<!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>
ログイン後にコピー

nextUntil() メソッドjQueryのトラバーサルメソッドとは何ですか?

<!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>
ログイン後にコピー

prev() メソッドjQueryのトラバーサルメソッドとは何ですか?

<!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>
ログイン後にコピー

#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>
ログイン後にコピー
jQueryのトラバーサルメソッドとは何ですか?

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>
ログイン後にコピー
jQueryのトラバーサルメソッドとは何ですか?

each() メソッドと map() メソッドは配列を走査できますjQueryのトラバーサルメソッドとは何ですか?

each() は配列を走査しますarray

<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>
ログイン後にコピー

jQueryのトラバーサルメソッドとは何ですか?

map() は配列を走査します

<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>
ログイン後にコピー

##知識を広げる: それぞれの使用法jQueryのトラバーサルメソッドとは何ですか?

jQueryのトラバーサルメソッドとは何ですか? 1. 配列内の各

#

复制代码

 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
ログイン後にコピー
2. Dom 要素を走査

<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. それぞれの比較とマップ

##次の例は、複数のボックスの各 ID 値を取得するものです;

各メソッド:

空の配列を定義しますそして、各メソッドを通じて ID 値を配列に追加します; 最後に、配列が文字列に変換された後、この値をアラートします; 

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})
ログイン後にコピー

map メソッド:

#それぞれを実行します: checkbox return this.id; そして、これらの戻り値を jQuery オブジェクトとして自動的に保存し、get メソッドを使用してネイティブ JavaScript 配列に変換し、join メソッドを使用して文字列に変換します。最後に値をアラートします; 

$(function(){
    var str = $(":checkbox").map(function() {
        return this.id;
    }).get().join();    
    alert(str);
})
ログイン後にコピー

配列の値が必要な場合は、map メソッドを使用すると非常に便利です。

4. jquery で各

# を使用して、要素のインデックスとコンテンツの両方を使用して配列を走査します。 (i はインデックス、n は内容です)

コードは次のとおりです: 

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
ログイン後にコピー
メンバー名と変数内容の両方を使用して、オブジェクトの例を示します。 (i はメンバー名、n は変数の内容)

コードは次のとおりです: 

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
ログイン後にコピー
dom 要素のトラバースの例。ここでは例として入力フォーム要素が使用されています。 このようなコードが dom にある場合 

<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"/>
ログイン後にコピー

その後、それぞれを次のように使用します

コードは次のとおりです:

$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});
ログイン後にコピー

5.各

## でこれに基づいて要素を検索します

实现效果”回复”两个字只有在鼠标经过的时候才显示出来

<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前端视频】

バージョン 1.8 では非推奨になりました。 addBack() のエイリアス
選択した要素のすべての直接の子要素を返します
##next()
#not() 一致する要素のセットから要素を削除します
offsetParent( ) 最初に配置された親要素を返します
parent() 選択した要素の直接の親要素を返します
parents () 選択した要素のすべての祖先要素を返します
parentsUntil() 指定された 2 つのパラメータの間のすべての祖先要素を返します
prev() 選択した要素の前の兄弟要素を返します
prevAll() Returns選択した要素の前のすべての兄弟要素
#prevUntil() 指定された 2 つのパラメータの間を返します

以上がjQueryのトラバーサルメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript jquery
ソース：php.cn
前の記事：jqueryのフォーカスイベントとは何ですか? 次の記事：Web3.0 が来ていますが、フロントエンドフレンドリーですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート