jQuery セレクタに変数を使用したい

Question

<table id="table">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>D</th>
    <th>E</th>
    <th>F</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<script>
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for (var i = 0; i < arr.length ; i++) {
  if (i < 3) {
    $("#table tr:nth-child(2) td:nth-child(1+i)").text(arr[i]);
  }
  if (i > 2) {
    $("#table tr:nth-child(4) td:nth-child(-3+i)").text(arr[i]);
  }
}
</script>

A	B	C
D	E	F

上記のようなテーブルがあり、各tdに順番に配列の値を格納したいのですがうまくいきません。
解決方法のご教示をお願いいたします。

補足：

<table>タグにのみidを設定して、うまくセレクタを使用して実装したいです。

Answer 1

eqを使って下さい

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
for (var i = 0; i < arr.length ; i++) {
  if (i < 3) {
    $("#table tr:nth-child(2) td").eq(i).text(arr[i]);
  }else{
    $("#table tr:nth-child(4) td").eq(i-3).text(arr[i]);
  }
}

追記

単純にtdにarrの値を順にいれるならこれでもよいでしょう

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
$("#table td").text(function(){
  return arr[$(this).closest('table').find('td').index(this)];
});

Comments

[cafeore_nmti]

回答ありがとうございます。
eq()の方は引数に0から始まる順番を指定し、該当の要素を処理する方法なのですね。
追記の方は簡潔に述べると、this(td)の親要素(table)を見つけ、その子孫要素(td)に配列の値を順番に入れているということでしょうか？

[yambejp]

> 追記の方

これは各条件でつかんだ要素のインデックス（何番目のデータか）を拾って処理しています
tdの要素数と配列の要素数が同じで頭から当てはめていくのであれば
インデックスを利用するのがてっとりばやいでしょう

[退会済みユーザー]

tr 側も :eq セレクタでｗ

Answer 2

普通に文字列と変数を結合するときと同じですが、クォートで囲むと単なる文字列になるので、文字列結合+を使ってください。

$("#table tr:nth-child(2) td:nth-child("+(1+i)+")").text(arr[i]);

Comments

[cafeore_nmti]

回答ありがとうございます。
いただいた回答で動作は確認できたのですが、まだ納得ができていません。
var i = 0; として、td:nth-child("+(1+i)+") をするとコードは
td:nth-child("1") となり、私の頭の中では実行できないような気がします。
リンク先も拝見させていただきましたし、単純な文字列の結合は理解できているつもりですが…。お手数ですがよければそちらの方もう少し教えていただけませんでしょうか…？

[m.ts10806]

> td:nth-child("1") となり、私の頭の中では実行できないような気がします。

その「できないような気がする」というのはどういうことでしょうか。
確かに1週目の結果はtd:nth-child("1")とはなりますけども。

[cafeore_nmti]

$("#table tr:nth-child(2) td:nth-child("1")").text(arr[i]);
ためしにこちらで実行してみたところ、エラーがでたので…。

[m.ts10806]

同じクォートを中に含める場合はエスケープしてください。
$("#table tr:nth-child(2) td:nth-child(\"1\")").text(arr[i]);

[退会済みユーザー]

eq じゃいけんの？ http://semooh.jp/jquery/api/core/eq/position/

[m.ts10806]

yambejpさんが回答つけてくれているのでそちらで。