HTML,CSS,Javascript13(idを配列として取得)
・目次
1.目的
・javascriptとjQuaryの配列について記載する。
2.配列としてidの取得
idの数値を取得する。
let 変数名; 変数 = document.getElementById("文字列"+数値+"文字列);
例
let arrayid = []; arrayid[0] = document.getElementById("card["+0+"]");
3.プログラム作成(配列としてidを取得)
idを配列として取得し、card[0]の文字列をカードに変更している。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> /* カード設定 CSS */ .card{ /* boxのサイズを指定 */ width: 8em; height: 10em; /* boxの色をskyblueに指定 */ background:skyblue; /* boxの上のカーソルを指マークに指定 */ cursor: pointer; /* boxの外側の余白を指定 */ margin: 1em 1em; /* 中央にテキストを表示 */ text-align: center; /* 行の高さを設定 */ line-height: 10; } /*要素を横並びにする*/ .flexset{ display: flex; } </style> </head> <body> <div class = "flexset"> <div class = "card" id="card[0]">card1</div> <div class = "card" id="card[1]">card2</div> <div class = "card" id="card[2]">card3</div> <div class = "card" id="card[3]">card4</div> </div> <script> window.onload = function () { //配列の宣言 let arrayid = [] for(let i =0;i<4;i++){ arrayid[i] = document.getElementById("card["+i+"]"); } arrayid[0].innerText = "カード"; } </script> </body> </html>
実行結果
card1
card2
card3
card4
3.jQueryのセレクタでを使う際の注意点
jQueryのセレクタでは、id名などにを使用すると、そのまま取得することは出来ない。
は、属性セレクタで指定する場合などに使用する為、class名やid名としてを使用する場合は、下記のようにする必要がある。
$("id名\\[カッコ内のid名\\]");
例
html側 <div class = "card" id="card[0]">card1</div> javascript側 $("#card\\[0\\]").text("カード");
下記だと出来ない。
html側 <div class = "card" id="card[1]">card2</div> javascript側 $("#card[1]").text("カード");
4.jQueryのセレクタで数値を扱う
数値を使用する場合は、+を使用する。
$("id名"+数値);
例
html側 <div class = "card" id="card3">card4</div> javascript側 let i = 3; $("#card"+i).text("カード");
5.プログラム作成(セレクタで[]と数値を使用)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>タイトル</title> <!-- JQuaryの追加 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> /* カード設定 CSS */ .card{ /* boxのサイズを指定 */ width: 8em; height: 10em; /* boxの色をskyblueに指定 */ background:skyblue; /* boxの上のカーソルを指マークに指定 */ cursor: pointer; /* boxの外側の余白を指定 */ margin: 1em 1em; /* 中央にテキストを表示 */ text-align: center; /* 行の高さを設定 */ line-height: 10; } /*要素を横並びにする*/ .flexset{ display: flex; } </style> </head> <body> <div class = "flexset"> <div class = "card" id="card[4]">card1</div> <div class = "card" id="card[5]">card2</div> <div class = "card" id="card[test]">card3</div> <div class = "card" id="card7">card4</div> </div> <script> window.onload = function () { //$("id名\\[カッコ内のid名\\]") $("#card\\[4\\]").text("カード1"); //これなら出来る。 $("#card[5]").text("カード2"); //これだと出来ない。 $("#card\\[test\\]").text("カード3"); //これなら出来る。 let i = 7; //$("id名"+数値); $("#card"+i).text("カード4");//数値を入れる場合 } </script> </body> </html>
結果
card1
card2
card3
card4
参考:
・【jQuery入門】配列の使い方(作成・追加・検索・取得)まとめ! | 侍エンジニアブログ
・文法の基礎!jQueryの配列の使い方【初心者向け】 | TechAcademyマガジン