jQueryのサンプルコードの中にわからないところがありました

Question

今jQueryを学習しています。
本で学習しているのですがその中のサンプルコードによくわからない点がありました。

//ここからがテーブルセルのハイライト
    $("td").hover(function() {
      //マウスホバー時の処理
      //親要素(tr)にtargetクラスを追加
      $(this).parent().addClass("target");

      //親要素から見て子が何番目の子要素なのか調べる
      var myIndex = $(this).index();
      //indexは0番目から数えるがnth-childは1番目から数えるので帳尻を合わせる
      myIndex++;

      //ここの下の1行が良くわかりません
      $("td:nth-child("+ myIndex +")").addClass("target");
    }, function() {
      //マウスアウト時の処理
      $(".target").removeClass("target");
    });

このコードのコメントにある行の１行下にある("+ myIndex +")の意味がよくわかりません。
わかる方教えていただけないでしょうか。

Answer 1

コメントにある行の１行下にある("+ myIndex +")の意味がよくわかりません。

セレクタを文字列として組み立てています。
"td:nth-child(" + 1 + ")"⇒"td:nth-child(1)"みたいな感じです。

【:nth-child() - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

Comments

[Smith.A]

なるほど！理解できました。ありがとうございました。

[Smith.A]

！

Answer 2

文字列連結です。