2024年08月05日
jquery：4.階層構造の要素セレクトと操作
ここではJQueryで階層構造の「要素セレクト」と「要素の追加/削除方法」を解説します。
1.要素セレクトの種類
階層構造の要素セレクトを図示すると、下図の様になります。
各々のセレクターの概要は下記になります
| 区分 | セレクタ | 備考 |
| 親子 | .children() | 現在の階層の1つ下(子)をセレクト |
| .parent() | 現在の階層の1つ上(親)をセレクト | |
| 兄弟 | .prev() | 現在の要素の１つ前(兄弟)をセレクト |
| .next() | 現在の要素の１つ後(兄弟)をセレクト | |
| 現在の階層 | .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()の色を赤に変更します。
④[リセットボタン]を挿入してください。
画面をリロードして、初めの状態に戻します。
|
|
このプログラムは下記から構成されています。
<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://school.t-spirits.com/'> リンク</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()要素の値を取得して１を加えています。
尚、+は文字連結ではなく、加算で使うので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()
|
|
このプログラムは下記から構成されています。
<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://school.t-spirits.com/'> リンク</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() します。
③[リセット]ボタンを挿入して下さい。
画面をリロードしてリセットします。
|
|
このプログラムは下記から構成されています。
<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://school.t-spirits.com/'> リンク</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() で新しいリストを作成しています。
②[リセット]ボタンを挿入して下さい。
画面をリロードしてリセットします。
|
|
このプログラムは下記から構成されています。
<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()で画面をリロードする事により画面をリセットしています。