jQuery eachメソッドを使ってDOM要素に採番したIDを割り振る

2023年1月27日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

構文
$(“td").each(function(){ $(this).attr(“id",文字列+数字変数)
}
attrメソッドを利用して要素のtdタグに属性のidと属性値の文字列と数値を割り当てています。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
      let n = 1;
    // 処理を繰り返す
    $("td").each(function(){
     　//要素のtdタグに属性のidと属性値の文字列と数値を割り当てる
          $(this).attr("id","city"+n);
          n++;
    });
    });
</script>
</head>
<body>

<table border="1" width="80%">
      <tr>
            <td>東京</td>
            <td>大阪</td>
            <td>福岡</td>
      </tr>
</table>
</body>
</html>

実行結果
<td id ="city1″>東京</td>
<td id ="city2″>大阪</td>
<td id ="city3″>福岡</td>

jQuery

Posted by arkgame

関連記事: