jQueryで指定するセレクタに変数を利用するコード

jQueryで要素の指定で使うセレクタを時と場合により違うセレクタに使いたいとき、そのセレクタを変数にして使うことができます。

テーブルにある0から10までの数字をクリックしたときに、
クリックした数字(td)が表示される(h1)コードを作りました。

変数を使用したセレクタ設定のサンプルコード

$(function(){
  for (var i=0; i < 10; i++){
    $('#' + i).click(function(){
      var num = parseInt($(this).text());
      $("#first-num").text(num);
    });
  }
});

使用するHTMLコード

    <table>
      <tr>
        <td id="1">1</td>
        <td id="2">2</td>
        <td id="3">3</td>
        <td id="4">4</td>
        <td id="5">5</td>
        <td id="6">6</td>
        <td id="7">7</td>
        <td id="8">8</td>
        <td id="9">9</td>
        <td id="10">10</td>
      </tr>
    </table>
    <h1 id="first-num">0</h1>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です