jQuery のトラバーサル関数についての簡単な説明-jsチュートリアル-php.cn

この記事では、jQuery のトラバーサル関数を理解します。一定の参考値があるので、困っている友達が参考になれば幸いです。

jQuery のトラバーサル関数についての簡単な説明

jQuery トラバーサル関数

jQuery トラバーサル関数にはフィルタリング、検索方法が含まれていますそして要素を連結します。

関数	説明
.add()	要素を要素のコレクション内で一致します。
.andSelf()	スタック内の以前の要素セットを現在のセットに追加します。
.children()	一致する要素セット内の各要素のすべての子要素を取得します。
.closest()	要素自体から開始して、上位の要素を段階的に照合し、最初に一致した祖先要素を返します。
.contents()	テキストノードやコメントノードなど、一致する要素コレクション内の各要素の子要素を取得します。
.each()	jQuery オブジェクトを反復処理し、一致する要素ごとに関数を実行します。
.end()	現在のチェーン内の最新のフィルタリング操作を終了し、一致する要素のセットを前の状態に戻します。
.eq()	一致する要素のセットを指定されたインデックスの新しい要素に縮小します。
.filter()	一致する要素のセットを、セレクターまたは一致する関数の戻り値に一致する新しい要素に縮小します。
.find()	セレクターによってフィルター処理された、現在の一致する要素セット内の各要素の子孫を取得します。
.first()	一致する要素のセットをセット内の最初の要素に削減します。
.has()	一致する要素のセットを、特定の要素の子孫を含むセットに縮小します。
.is()	セレクターに基づいて一致する要素の現在のセットを確認し、一致する要素が少なくとも 1 つある場合は true を返します。
.last()	一致する要素のセットをセット内の最後の要素に縮小します。
.map()	現在の一致セットの各要素を関数に渡し、戻り値を含む新しい jQuery オブジェクトを生成します。
.next()	一致する要素セット内の各要素にすぐ隣接する兄弟要素を取得します。
.nextAll()	セレクターでフィルター処理された、一致する要素セット内の各要素の後のすべての兄弟要素を取得します (オプション)。
.nextUntil()	セレクターに一致する要素が見つかるまで、各要素の後のすべての兄弟要素を取得します。
.not()	一致する要素のセットから要素を削除します。
.offsetParent()	位置決めに使用される最初の親要素を取得します。
.parent()	セレクターでフィルター処理された、一致する要素の現在のセット内の各要素の親要素を取得します (オプション)。
.parents()	セレクター (オプション) でフィルター処理された、現在の一致する要素セット内の各要素の祖先要素を取得します。
.parentsUntil()	セレクターに一致する要素が見つかるまで、一致する要素の現在のセット内の各要素の祖先要素を取得します。
.prev()	セレクターでフィルター処理された、一致する要素セット内の各要素の直前の兄弟要素を取得します (オプション)。
.prevAll()	セレクターでフィルター処理された、一致する要素セット内の各要素の前にあるすべての兄弟要素を取得します (オプション)。
.prevUntil()	セレクターに一致する要素が見つかるまで、各要素の前にあるすべての兄弟要素を取得します。
.siblings()	セレクターでフィルター処理された、一致する要素セット内のすべての要素の兄弟要素を取得します (オプション)。
.slice()	一致する要素のセットを、指定された範囲のサブセットに縮小します。

それぞれの使用法

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 値を取得するものです;

各メソッド:

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

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})

ログイン後にコピー

map メソッド:

各 :checkbox を実行して 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() メソッドとは異なり、このメソッドは任意のオブジェクトを反復処理するために使用できます。コールバック関数には 2 つのパラメータがあります。1 つ目はオブジェクトのメンバーまたは配列のインデックスで、2 つ目は対応する変数またはコンテンツです。各ループを終了する必要がある場合は、コールバック関数が false を返すようにすることができ、他の戻り値は無視されます。

パラメータ

objectObject: 走査する必要があるオブジェクトまたは配列。

callback (オプション) 関数: 各メンバー/要素によって実行されるコールバック関数。

プログラミング関連の知識について詳しくは、
プログラミングビデオ

をご覧ください。！

以上がjQuery のトラバーサル関数についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。