HTML,CSS,Javascript13(idを配列として取得)

・目次

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>