JavaScript html要素にidプロパティにて連番を作成する方法
環境
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>
<!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>
<!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」連番を加えて作成します。