jQueryのトラバーサル関数の使い方-jsチュートリアル-php.cn

jQueryのトラバーサル関数の使い方

迷茫

リリース： 2017-01-23 14:29:26

オリジナル

1063 人が閲覧しました

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() は、一致する要素のセットを指定された範囲のサブセットに縮小します。

each の使用法

1. 配列内の each

2. Dom 要素の走査

rreee

3. 各マルチボックスを取得する例は次のとおりです。 ID 値;

各メソッド:

空の配列を定義し、各メソッドを通じて配列に ID 値を追加します。最後に、配列を文字列に変換した後、この値を通知します:

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

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

ログイン後にコピー

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

4. jquery で each

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

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

<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>
依次弹出Coffee，Milk，Soda

ログイン後にコピー

メンバー名と変数の内容の両方を使用してオブジェクトを例にします。 (i はメンバー名、n は変数の内容)

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

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

ログイン後にコピー

dom 要素の走査の例。ここでは例として入力フォーム要素が使用されています。

あなたの dom にこのようなコードがある場合

$(function(){
  var str = $(":checkbox").map(function() {
    return this.id;
  }).get().join();  
  alert(str);})

ログイン後にコピー

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

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

$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );});

ログイン後にコピー

5.それぞれがこれに基づいて要素を見つけます

「返信」という単語はマウス上にあるだけです通過後に表示されます

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );});

ログイン後にコピー

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

<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的值});

ログイン後にコピー

jsコード

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

ログイン後にコピー

6. 公式説明

以下は公式説明です:

$("div.reply").hover(function(){
 $(this).find(".comment-reply-link").show();},function(){
 $(this).find(".comment-reply-link").hide();});

ログイン後にコピー

概要オブジェクトと配列を反復するために使用できる一般的な反復メソッド。

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