each()-jQueryメソッド

jQuery

スポンサードリンク

スポンサードリンク

each()メソッドの構文

jQueryオブジェクト.each(function(index,element){


    繰り返す内容の処理

})

each()の詳細

処理内容:jQueryオブジェクト(HTML要素や配列など)が含む各要素毎に、引数に指定した関数を実行するするメソッド。
引数 index:現在処理されている要素の番号 (0からスタート)
引数 element:取得したHTML要素

each()メソッドを使ったコード例

HTML

<div>
  <button class="b1">olive</button>
  <button class="b2">orange</button>
  <button class="b3">brown</button>  
</div>

CSS

.b1{
  background-color:olive;
}
.b2{
  background-color:orange;
}
.b3{
  background-color:brown;
}

jQuery

 $('button').each(function(index, element)
{
document.write(index + ':' + $(element).text() + "\t");
}
)

See the Pen
each()-jQuery
by roymoy (@roymoy)
on CodePen.

JavaScript・jQueryのおすすめの本

発売日:2018/6/8

JavaScriptの初級向けの本です。基本をわかりやすく丁寧に解説してくれてます。まず第一歩はこちらからの本から。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

発売日:2015/12/16

30のLesson形式で実践的なコードを身につける事ができます。図解もあるので大変読みやすいです。jQueryをコードを書きながら覚えたい方におすすめです。

jQuery標準デザイン講座

発売日:2013/11/26

jQueryの基本から実践をわかりやすく解説してくれる良著です。jQueryのリファレンスからそのままサイトで使えるコードを身につけることができます。

jQuery最高の教科書

スポンサードリンク

スポンサードリンク