用途
新着
履歴
分類

jQuery クラスで一括操作

jQuery クラスで一括操作
クラスが付いている要素にだけ処理を実行したい場合のよく使うメソッドです。

filterとhasClassのメソッドのサンプルの二つを用意しました。

実行している内容はほぼ同じです。

まずはfilterメソッドを使った場合

上記のサンプルは以下のJSの実行結果です。

	$("#demo_area div").filter(".hoge")
		.css("background", "#FCC");

HTMLはこちら

<div id="demo_area">
	<div></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div></div>
</div>

次はhasClassメソッドの場合

上記のサンプルは以下のJSで実行してます。

	$('#demo_area2 div').each(function() {
		if($(this).hasClass("hoge")){
			$(this).css("background", "#FCC");
		}
	});

HTMLはこちら

<div id="demo_area2">
	<div></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div></div>
</div>

filterメソッドを知っていたら、わざわざeachを使って、hasClassを使うのは無駄な感じがしますね。


しかし、最後に以下のサンプルのご確認を。

こちらのJSはこちら

$('#demo_area3 div.hoge').css("background", "#FCC");

HTMLはこちら

<div id="demo_area3">
	<div></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div class="hoge"></div>
	<div></div>
</div>

このサンプルには、filterもhasClassも使っていません。

どのような場面で使うか、で手法を選ぶのが良さそうです。

公開 2019-08-07 23:45:03
このページの二次元コード
jQuery クラスで一括操作

人気のサンプル

search -  category -  about
© 2024 kipure
Top