JavaScript html要素にidプロパティにて連番を作成する方法

2023年3月29日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

書式
1.html要素を取得します
let オブジェクトの変数名 = document.querySelectorAll('#ulのid名 li’);

2.オブジェクトのキーと要素を取得します
オブジェクトの変数名.entries()
Object.entries() メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組
[key, value] からなる配列を返します。

使用例

<!DOCTYPE html>
<html>
<body>

<ul id="city">
  <li>tokyo</li>
  <li>oosaka</li>
  <li>fukuoka</li>
</ul>

<button onclick="add()">追加</button>

<script>
function add() {
// オブジェクトの取得
let eles = document.querySelectorAll('#city li');
// entriesでキーと値を取得
for (const [i,e] of eles.entries()){
    e.id=`city-${i}`;
  }
  
  console.log(eles[0]);
}
</script>

</body>
</html>

実行結果
「追加」ボタンを押すと、タグli要素に「id=xxx」連番を加えて作成します。

JavaScript

Posted by arkgame

関連記事: