問題 × 解決策

jQueryの「each()」で要素それぞれ個別に処理を行う

問題

jQueryで特定の条件に当てはまる要素に対して、それぞれ個別に処理を行うには?

解決策

jQueryの「each()」を使用する。

 

それぞれ個別に処理

jQueryで特定の条件に当てはまる要素に対して、それぞれ個別に処理を行っていきたい場合は「each()」 を使用することで実現することができます。

「each()」は以下の形で記述します。

$('セレクタ').each(function() {
	// それぞれの該当要素への処理内容
});

「each()」の使用例

DEMOはこちら

  • アイテム
  • アイテム
  • 削除
  • アイテム
  • アイテム
  • アイテム
  • 削除

HTML

<ul class="jqeach-list clearfix">
	<li>アイテム</li>
	<li>アイテム</li>
	<li>削除</li>
	<li>アイテム</li>
	<li>アイテム</li>
	<li>アイテム</li>
	<li>削除</li>
</ul>

CSS

.jqeach-list > li{
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #fef5f2;
}
.jqeach-list > li.rewrite{
	color: #F15A24;
	font-weight: bold;
}

javascript

if($('.jqeach-list > li').length){
	$('.jqeach-list > li').each(function() {
		if( $(this).text().indexOf('削除') != -1 ){
			$(this).html('書き換えました。');
			$(this).addClass('rewrite');
		}
	});
}
  • 「indexOf(‘削除’) != -1」で「削除」というテキストを内包していないかどうかを判定しています。
  • 「html()」でliタグ内のHTML文を上書きさせます。
  • 「addClass(‘rewrite’)」でクラス「rewrite」を付与させます。

ポイント!

「each()」の処理内において、対象の要素は「$(this)」で指定することができます。

参考ページ

【each(callback) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/core/each/callback/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 − twelve =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧