string(11) "3.239.76.25"

2022年04月29日

jquery:4.階層構造の要素セレクトと操作

ここではJQueryで階層構造の「要素セレクト」と「要素の追加/削除方法」を解説します。

1.要素セレクトの種類

階層構造の要素セレクトを図示すると、下図の様になります。

各々のセレクターの概要は下記になります

区分 セレクタ 備考
親子 .children() 現在の階層の1つ下(子)をセレクト
.parent() 現在の階層の1つ上(親)をセレクト
兄弟 .prev() 現在の要素の1つ前(兄弟)をセレクト
.next() 現在の要素の1つ後(兄弟)をセレクト
現在の階層 .first() 現在の階層(兄弟)の先頭をセレクト
.last() 現在の階層(兄弟)の最後をセレクト
.eq(n) 現在の階層(兄弟)のn番目をセレクト

n:0から始まるカウンター

.find('タグ名') 現在の階層の下(子孫)から要素名を探してセレクト

例).find('a')

事例

1.セレクトのサンプル事例

下記はchildren()parent()first()last()eq(n)find('タグ名')を使った事例です。

①[BOXのどこか]をクリックして下さい。

BOXの中の<a>タグ要素をfind()で探しURLを取得して表示します。

②[子要素をセレクト]ボタンを挿入して下さい。

BOXの中の子要素children()first()、last()eq(1)の色を赤に変更します。

③[リンク]文字をクリックして下さい。

<a>タグのparent()の色を赤に変更します。

④[リセットボタン]を挿入してください。

画面をリロードして、初めの状態に戻します。

1つ目
2つ目
3つ目  リンク
4つ目

このプログラムは下記から構成されています。

<HTML>

<div class='base01' style='padding:10px;border:1px solid #000;width:200px;cursor: pointer;'>
  <div>1つ目</div>
  <div>2つ目</div>
  <div>3つ目
  	<a class='link_taget' href='https://hnw.t-spirits.com/school/'> リンク</a>
  </div>
  <div>4つ目</div>
</div>
<div style='display:flex;'>
	<button tyepe='button' class='select01' style='margin-top:10px;'>子要素をセレクト</button>
	<button tyepe='button' class='reset01' style='margin-top:10px;margin-left:10px;'>リセット</button>
</div>
<div class='msg01' style='color:red;'></div>

<jQuery>

上記のHTMLを下記のjQueryで操作します。

<script>
$(function(){
	$('.base01').click(function(){ // BOXがクリックされたらリンク要素を探して表示する
		var link_target = $(this).find('a').attr('href');
		$('.msg01').text('リンク先は ' + link_target + ' です。');
	});
	$('.select01').click(function(){ // ボタンが挿入されたら先頭、最後、2番目の要素の色を変える
		$('.base01').children().first().css( 'color' , 'red');
		$('.base01').children().last().css( 'color' ,'red' ); 
		$('.base01').children().eq(1).css( 'color' , 'red' ); 
		var count = $('.base01').children().length;
		$('.msg01').html('先頭、最後及び2番目の要素の色を変えました。<br>又、子要素の数は ' + count + ' です。');
	});
	$('a.link_taget').click(function(){
		$(this).parent().css( 'color','red');
		$('.msg01').html('リンク要素がクリックされました。親要素の色を変えます。');
		return false;
	});
	$('.reset01').click(function(){	// リセットボタンが挿入されたら、現在の画面をリロードする(リセット)
		location.reload();
	});
});
</script>

■3~6行目

BOXの中の<a>タグ要素をfind()で探しURLを取得して表示します。

■7~13行目

BOXの中の子要素children()first()、last()eq(1)の色を赤に変更します。

また11行目で子要素の数を取得しています。

■14~18行目

リンク文字がクリックされたら<a>タグのparent()の色を赤に変更します。

又、functionをreturn false;で終了させることにより、リンク機能をキャンセルしています。

■19~21行目

リセットボタンが挿入されたらlocation.reload()で画面をリロードする事により画面をリセットしています。

 

2.カウントUP/DOWN

下記は.prev()next()を使った事例です。

「+」ボタンで加算、「-」ボタンで減算します。(0になると減算しません)

このプログラムは下記から構成されています。

<HTML>

<div style='display:flex;'>
	<button tyepe='button' class='minus' style='margin:10px 0;'>-</button>
	<input type='text' size=3 value=0 style='margin:10px 2px;text-align:right;'>
	<button tyepe='button' class='plus' style='margin:10px 0;'>+</button>
</div>

<jQuery>

上記のHTMLを下記のjQueryで操作します。

<script>
$(function(){
	$('.plus').click(function(){
		var count = $(this).prev().val();
		count = Number(count) + 1;// 文字連結でないのでNumber()で数値化している。
		$(this).prev().val(count);
	});
});
$(function(){
	$('.minus').click(function(){
		var count = $(this).next().val();
		if(count > 0){
			count =count - 1;
			$(this).next().val(count);
		}
	});
});
</script>

■2~8行目:加算処理

+ボタンが挿入されたらprev()要素の値を取得して1を加えています。

尚、+は文字連結ではなく、加算で使うのでNumber()で数値化しています。

■9~17行目:減算処理

-ボタンが挿入されたらnext()要素の値を取得して1を減算しています。

尚、減算は値が1より大きい時だけです。

 

2.要素の追加と削除

次に階層構造の中に要素を追加/削除するメソッドを図示すると下図の様になります。

各々のメソッドの概要は下記になります。

区分 メソッド 備考
前後 .before( content ) 現在の要素の前に追加

content:追加するHTML又はテキスト

.after( content ) 現在の要素の後ろに追加

content:追加するHTML又はテキスト

階層 .prepend( content ) 現在の階層の先頭に追加

content:追加するHTML又はテキスト

.append( content ) 現在の階層の最後に追加

content:追加するHTML又はテキスト

.empty() 現在の階層を空にする(削除)
削除 .remove() 指定要素を削除する

事例

1.子要素の先頭、末尾に要素を追加/削除する

下記はprepend()append()remove()を使った事例です。

①[子要素追加]ボタンを挿入して下さい。

子要素の先頭 prepend() と末尾 append() に要素を追加します。

②[子要素削除]ボタンを挿入して下さい。

先頭と末尾の要素を削除 remove() します。

③[リセットボタン]を挿入して下さい。

画面をリロードしてリセットします。location.reload()

1つ目
2つ目
3つ目  リンク
4つ目

このプログラムは下記から構成されています。

<HTML>

<div class='base02' style='padding:10px;border:1px solid #000;width:200px;cursor: pointer;'>
  <div>1つ目</div>
  <div>2つ目</div>
  <div>3つ目
  	<a href='https://hnw.t-spirits.com/school/'> リンク</a>
  </div>
  <div>4つ目</div>
</div>
<div style='display:flex;'>
	<button tyepe='button' class='add02' style='margin-top:10px;'>子要素追加</button>
	<button tyepe='button' class='del02' style='margin-top:10px;margin-left:10px;'>子要素削除</button>
	<button tyepe='button' class='reset02' style='margin-top:10px;margin-left:10px;'>リセット</button>
</div>
<div class='msg02' style='color:red;'></div>

<jQuery>

上記のHTMLを下記のjQueryで操作します。

<script>
$(function(){
	$('.add02').click(function(){ // 子要素追加ボタンが挿入されたら先頭と末尾に要素を追加
		$('.base02').prepend("<div>先頭に追加</div>");
		$('.base02').append("<div>末尾に追加</div>");
		$('.base02').children().first().css( 'color' , 'red');
		$('.base02').children().last().css( 'color' ,'red' );
		var count = $('.base02').children().length;
		$('.msg02').text('追加後の子要素の数は ' + count + ' です。');
	});
	$('.del02').click(function(){ // 子要素削除ボタンが挿入されたら先頭と末尾に要素を削除
		$('.base02').children().first().remove();
		$('.base02').children().last().remove();
		var count = $('.base02').children().length;
		$('.msg02').text('削除後の子要素の数は ' + count + ' です。');
	});
	$('.reset02').click(function(){ // リセットボタンが挿入されたら画面をリロードする(リセット)
		location.reload();
	});
});
</script>

■3~10行目:子要素の追加

追加ボタンがクリックされたら先頭要素.prepend()、末尾要素.append()で要素を追加しています。

■11~16行目:子要素の削除

削除ボタンが挿入されたら.first().last()の要素を.remove()で削除しています。

■17~19行目:リセット

リセットボタンが挿入されたらlocation.reload()で画面をリロードする事により画面をリセットしています。

 

2.現在の要素の前後に要素を追加/削除する

下記はbefore()after()remove()を使った事例です。

①[同一レベルの要素追加]ボタンを挿入して下さい。

現在の要素の前 before() after() に要素を追加します。

②[同一レベルの要素削除]ボタンを挿入して下さい。

現在の要素の前後の要素を削除 remove() します。

③[リセット]ボタンを挿入して下さい。

画面をリロードしてリセットします。

1つ目
2つ目
3つ目  リンク
4つ目

このプログラムは下記から構成されています。

<HTML>

<div class='base03' style='padding:10px;border:1px solid #000;width:200px;cursor: pointer;'>
  <div>1つ目</div>
  <div>2つ目</div>
  <div>3つ目
  	<a href='https://hnw.t-spirits.com/school/'> リンク</a>
  </div>
  <div>4つ目</div>
</div>
<div style='display:flex;'>
	<button tyepe='button' class='add03' style='margin-top:10px;'>同一レベル要素追加</button>
	<button tyepe='button' class='del03' style='margin-top:10px;margin-left:10px;'>同一レベル要素削除</button>
	<button tyepe='button' class='reset03' style='margin-top:10px;margin-left:10px;'>リセット</button>
</div>
<div class='msg03' style='color:red;'></div>

<jQuery>

上記のHTMLを下記のjQueryで操作します。

<script>
$(function(){
	$('.add03').click(function(){ // 加ボタンが挿入された時の処理
		$('.base03').before("<div>前要素を追加</div>");
		$('.base03').after("<div>次要素を追加</div>");
		$('.base03').prev().css( 'color' , 'red');
		$('.base03').next().css( 'color' ,'red' );
		$('.msg03').text('現在の要素の前後に要素を追加しました。');
	});
	$('.del03').click(function(){ // 削除ボタンが挿入された時の処理
		$('.base03').prev().remove();
		$('.base03').next().remove();
		$('.msg03').text('追加した前後要素を削除しました。');
	});
	$('.reset03').click(function(){ // リセットボタンが挿入されたら画面をリロードする(リセット)
		location.reload();
	});
});
</script>

■3~9行目:前要素、次要素の追加

追加ボタンがクリックされたら前要素.before()次要素.after()で要素を追加しています。

■10~14行目:追加した要素の削除

削除ボタンが挿入されたら.prev().next()の要素を.remove()で削除しています。

■15~17行目

リセットボタンが挿入されたらlocation.reload()で画面をリロードする事により画面をリセットしています。

 

3.子要素を空にしてから新しいリストを作成する。

下記はempty()append()を使った事例です。

①[置換]ボタンを挿入して下さい。

子要素を空 empty() にしてから、append() で新しいリストを作成しています。

②[リセット]ボタンを挿入して下さい。

画面をリロードしてリセットします。


このプログラムは下記から構成されています。

<HTML>

<select class='option' name='select' size='3'> 
	<option value='1' selected>項目1</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option> 
</select><br>
<button type='button' class='set' style='margin-top:10px;'>置換</button>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<div class='msg' style='color:red;'></div>

<jQuery>

上記のHTMLを下記のjQueryで操作します。

<script>
	$(function(){
		$('.set').click(function(){
			$('.option').empty();	// ターゲットのオプションを空にする
			$('.option').append('<option value="20" selected>サイズ20</option>');// ターゲットの最後に追加
			$('.option').append('<option value="30">サイズ30</option>');
			$('.option').append('<option value="40">サイズ40</option>');
			$('.option').append('<option value="50">サイズ50</option>');
			$('.option').append('<option value="60">サイズ60</option>');
			var count = $('.option').children().length;
			$('.option').attr('size',count);
			$('.msg').text('新しいリストに交換しました。');
		});			
		$('.reset').click(function(){ // リセットボタンが挿入されたら画面をリロードする(リセット)
			location.reload();
		});
	});
</script>

■3~13行目:置換処理

・4行目で一度リストを空にしてから、5~9行目で新しいリストを追加しています。

・10行目で新しいリストの個数を取得しています。

・11行目で、HTMLの1行目の 'size' 属性の値を変更しています。

■14~16行目

リセットボタンが挿入されたらlocation.reload()で画面をリロードする事により画面をリセットしています。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()