ホームページ ウェブフロントエンド jsチュートリアル jqueryの each(callback) を使用するとどのような効果が得られますか?

jqueryの each(callback) を使用するとどのような効果が得られますか?

Jun 16, 2017 pm 03:58 PM
jquery 使用 どうやって

概要

一致した各要素をコンテキストとして使用して関数を実行します。

は、渡された関数が実行されるたびに、関数内の this キーワードが異なる DOM 要素 (毎回異なる一致する要素) を指すことを意味します。また、関数が実行されるたびに、一致する要素集合内での実行環境としての要素の位置を表す数値(ゼロをベースとする整数)が関数にパラメータとして渡される。 「false」を返すとループが停止します (通常のループで「break」を使用するのと同じです)。次のループにジャンプするには、「true」を返します (通常のループで「Continue」を使用するのと同じです)。

例は次のとおりです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
 <title> 遍历元素</title>
  <script src="js/jQuery.js" type="text/JavaScript"></script>
    <!-- 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
     -->
 <style type="text/css">
  body{font-size:13px}
  img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
 </style>
 <script type="text/javascript">
  $(function() {
   $("img").each(function(index){
    // 根据形参index 设置元素的title 属性
    this.title = " 第" + index +" 幅风景图片,alt 内容是" + this.alt;
    if(i==1)
     return false;
   })
  })
 </script>
  </head>
  <body>
 <p>
  <img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
  <img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
  <img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
 </p>
  </body>
</html>
ログイン後にコピー

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

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

var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });
ログイン後にコピー

結果: トムの年齢は20歳です
ジェリーの年齢は30歳です

ジムの年齢は40歳です

var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});
ログイン後にコピー

結果: 1=1 2=2 3=3

var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});
ログイン後にコピー

結果: 0 1 2

var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});
ログイン後にコピー

結果: 20 30 40

$.each() は $(selector).each() とは異なり、後者は jquery オブジェクトの反復カレンダー専用です。前者は、任意のコレクション (配列であってもオブジェクトであっても) を走査するために使用できます。配列の場合、コールバック関数は毎回、配列のインデックスと対応する値を渡します (値は、このキーワードは使用されますが、JavaScript は常にこの値をオブジェクト (文字列であっても数値であっても) としてラップし、メソッドはトラバースされるオブジェクトの最初のパラメーターを返します。 each() メソッドは DOM ループ構造を作成できます。簡潔で間違いが起こりにくい。 each() 関数は非常に強力なトラバーサル関数をカプセル化しており、

1 次元配列

多次元配列、DOM、JSON などをトラバースできます。 JavaScript 開発プロセス中に $each を使用する私たちの作業負担を大幅に軽減できます。
それぞれは1次元配列を処理します

var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
ログイン後にコピー

alert(i)は0、1、2を出力します

alert(val)はaaa、bbb、cccを出力します


それぞれは2次元配列を処理します

var arr2 = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]
  $.each(arr, function(i, item){
alert(i);
alert(item);
  });
ログイン後にコピー
arr2は2 次元配列の場合、 item はこの 2 次元配列内の各配列を取得することと同等です。 item[0] 各 1 次元配列の最初の値を取得することに対する相対値

alert(i) は 0、1、2 を出力します。この 2 次元配列には 3 つの配列要素が含まれているためです。

alert(item) は For [' を出力しますa', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

この 2 桁の配列処理の変更

var arr = [[&#39;a&#39;, &#39;aa&#39;, &#39;aaa&#39;], [&#39;b&#39;, &#39;bb&#39;, &#39;bbb&#39;], [&#39;c&#39;, &#39;cc&#39;, &#39;ccc&#39;]]
  $.each(arr, function(i, item){
  $.each(item,function(j,val){
     alert(j);
    alert(val);
 });
});
ログイン後にコピー

alert(j)は0, 1, 2, 0, 1, 2, 0, 1, 2として出力されます

alert(val)はa, aa, aaa, b, bb , bbbとして出力されます、c、cc、ccc

それぞれjsonデータを処理します。これはそれぞれさらに強力で、すべての属性をループできます

var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});
ログイン後にコピー

ここでalert(key)は1、2、3を出力します

alert(val)は1、1、を出力しますtwo、2、three、3

なぜここでキーは数値ではなく属性なのでしょうか? json 形式は順序のない属性値のセットであるため、数値はどこにあるのでしょうか?

そして、この val は obj[key] に相当します

ecah は 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);
alert(i);
alert(val.name);
alert(val.value);
});
ログイン後にコピー
次に、alert(val) はフォーム要素であるため [object HTMLInputElement] を出力します。

alert(i) は 0、1、2、3 を出力します

alert(val.name); は aaa、bbb、ccc、ddd を出力します、this.name を使用すると同じ結果が出力されます

alert( val.value); は 111,222,333,444 を出力します。 上記のコードを次の形式に変更すると、同じ結果が出力されます。 2つの書き方の違いはどこにあるのか、まだわかりません。この変更を上記の配列操作に適用すると、同じ結果が生成されます。

以上がjqueryの each(callback) を使用するとどのような効果が得られますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。

foob​​ar2000のダウンロード方法は? -foobar2000の使い方 foob​​ar2000のダウンロード方法は? -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foob​​ar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

NetEase メールボックス マスターの使用方法 NetEase メールボックス マスターの使用方法 Mar 27, 2024 pm 05:32 PM

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「Ne​​tEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。

Baidu Netdisk アプリの使用方法 Baidu Netdisk アプリの使用方法 Mar 27, 2024 pm 06:46 PM

クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます Mar 10, 2024 pm 04:34 PM

Appleは火曜日にiOS 17.4アップデートを公開し、iPhoneに多数の新機能と修正をもたらした。このアップデートには新しい絵文字が含まれており、EU ユーザーは他のアプリ ストアから絵文字をダウンロードすることもできます。さらに、このアップデートでは iPhone のセキュリティ制御も強化され、より多くの「盗難デバイス保護」設定オプションが導入され、ユーザーにより多くの選択肢と保護が提供されます。 「iOS17.3では、「盗難デバイス保護」機能が初めて導入され、ユーザーの機密情報のセキュリティが強化されています。ユーザーが自宅やその他の身近な場所から離れている場合、この機能ではユーザーは最初に生体認証情報を入力する必要がありますApple ID パスワードの変更や盗難デバイス保護の無効化など、特定のデータにアクセスして変更するには、情報を再度入力する必要があります。

Xiaomi Autoアプリの使い方 Xiaomi Autoアプリの使い方 Apr 01, 2024 pm 09:19 PM

Xiaomi 車用ソフトウェアは、車のリモート制御機能を提供し、ユーザーが携帯電話やコンピュータを介して車両のドアや窓の開閉、エンジンの始動、車両のエアコンやオーディオの制御など、車両を遠隔制御できるようにします。このソフトウェアの使い方や内容について、一緒に学びましょう。 Xiaomi Auto アプリの機能と使用方法の包括的なリスト 1. Xiaomi Auto アプリは 3 月 25 日に Apple AppStore で公開され、Android スマートフォンのアプリストアからダウンロードできるようになりました; 車の購入: 主要なハイライトと技術パラメータについて学びますXiaomi Auto のサービスを利用して、試乗の予約をし、Xiaomi 車の設定と注文を行い、車の受け取りの To-Do 項目のオンライン処理をサポートします。 3. コミュニティ: Xiaomi Auto ブランド情報を理解し、車の経験を交換し、素晴らしいカーライフを共有します; 4. 車の制御: 携帯電話はリモコン、遠隔制御、リアルタイム セキュリティ、簡単です。

リトル ブラック ボックス CDKey の使用方法 リトル ブラック ボックス CDKey の使用方法 Mar 12, 2024 pm 07:34 PM

Little Black Box cdkey の使用方法 簡単に言うと、Steam プラットフォーム上のゲームを Little Black Box から直接購入でき、購入が成功すると CDK 引き換えコードを受け取ります。次に、Steam モールでこの引き換えコードを使用して、対応するゲームを購入します。小さな黒いボックスの CD キーの使い方を知らない友人も多いと思いますが、以下に引き換え手順を詳しく説明しますので、お役に立てれば幸いです。 Little Black Box cdkey の使用方法 1. まず、Little Black Box ゲームの購入後に取得した CDK 引き換えコードをコピーします。 2. 次に、Steam プラットフォームを起動します。 3. 左上隅のメニューで「ゲーム」オプションをクリックします。 4. 新しいメニューで「Steam で製品をアクティベートする」を見つけてクリックします。 5. ポップアップ インターフェイスで直接 [次へ] をクリックします。 6. 小さなブラックボックスを購入する

See all articles