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>