用途
新着
履歴
分類

jQuery コンテンツの選択と変更

jQuery コンテンツの選択と変更
jQueryのcontentsメソッドの活用サンプルです。

特定の要素の中の子要素に対して、一斉に変更などの処理を行いとき、contentsメソッドが便利です。

言葉で説明するのも難しいので以下のサンプルをご参照ください。

下記のボタンをクリックすると●●●の部分が一斉に変更されます。

●●●はとてもおいしい
とれたての●●●は新鮮でさらにおいしいです
●●●は赤い食べ物で冷やして保存します
私の母も●●●が好きです
トマト
いちご
マグロ

この部分のJSのポイントはこちら

	$('.change_btn').on('click',function(){
		txt = $(this).text();
		$("#demo_area").contents().find("span").text(txt);
	});

そしてHTMLはこちら

<div id="demo_area">
	<div><span>●●●</span>はとてもおいしい</div>
	<div>とれたての<span>●●●</span>は新鮮でさらにおいしいです
	<div><span>●●●</span>は赤い食べ物で冷やして保存します</div>
	<div>私の母も<span>●●●</span>が好きです</div>
</div>
<div id="change_btns">
	<div class="change_btn">トマト</div>
	<div class="change_btn">いちご</div>
	<div class="change_btn">マグロ</div>
</div>

contents()は、id="demo_area"の要素中の子要素すべてのdivの内容を指しています。

それぞれのdivの中のspanタグのテキストを変更する命令を実行しています。

contentsという漠然としたメソッド名なので、覚えにくく、使い所がいまいち浮かばない感じがあります。

しかし、指定した要素の子要素の全てに対してアクションすることができるので、ケースによっては、forなどのloopを使わないで済む分、コードがシンプルにできます。

意外とサンプルがネット上にないので、ご参考まで。

公開 2019-08-07 23:40:57
このページの二次元コード
jQuery コンテンツの選択と変更

人気のサンプル

search -  category -  about
© 2024 kipure
Top