質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

ください jQueryの「''」(クォーテーション)の扱い

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 877

maakun

score 19

解決したいこと

jqueryを勉強しています。
書籍の課題で自分の認識と異なっている箇所がありましたのでご教授頂けたら幸いです。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Lesson18</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<h1>Table Row and Column Highlighting</h1>
<table>
<tr>
<th> </th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<th>a</th>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
</tr>
<tr>
<th>b</th>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
</tr>
<tr>
<th>c</th>
<td>3000</td>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
</tr>
<tr>
<th>d</th>
<td>4000</td>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
</tr>
<tr>
<th>e</th>
<td>5000</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
<tr>
<th>f</th>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
<td>12000</td>
</tr>
<tr>
<th>g</th>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
<td>12000</td>
<td>13000</td>
</tr>
</table>
</body>
</html>

//jqueryでのDOM操作です
$(function(){
$('td').hover(function(){
$(this).parent().addClass('target');

var myIndex = $(this).index();
myIndex ++;

$('td:nth-child('+ myIndex +')').addClass('target');
},function(){
$('.target').removeClass('target');
});
});

納得のいかない箇所

jqueryでの操作ですが、8行目の('+ myIndex +')です。
myIndexは変数になり「''」(クォーテーション)がいらないと思ったので、「''」(クォーテーション)はなしで実行しましたが、動きません。
また文字列連結の+を使っている意味がよくわかりません。

「''」(クォーテーション)は文字列の際に使う仕様だと思っていてDOM操作上で要素は全て文字列になると書籍上にもありました。その上でindex()の要素番号も文字列だと認識しています。
ただ、その要素番号は変数に入れています。今まで実行した課題で変数を扱った場合、「''」(クォーテーション)は使用していませんでした。

そこで上記の納得のいかない箇所のご説明と、改めて「''」(クォーテーション)の使いどころを教えて頂ければと思い、質問させていただきました。

一応ググったのですが分かりませんでした...。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/02/02 11:14

    今回の質問だと
    ヘッダー用のTR1つ、ボディ用の2つで十分でですよね。
    ヘッダ用とボディ用は それぞれ <thead>/<tbody> で分けるのがよろしいかと

    キャンセル

  • m.ts10806

    2019/02/02 11:16

    コードはマークダウンのcode機能を利用してご提示ください

    キャンセル

  • maakun

    2019/02/02 14:05

    mts10806さん、初回でマークダウンのcode機能に気づきませんでした。
    以後、気をつけます。

    キャンセル

  • m.ts10806

    2019/02/02 14:11

    質問は編集できるので適宜ご対応いただければと。

    キャンセル

回答 2

checkベストアンサー

+2

myIndexは変数になり「''」(クォーテーション)がいらないと思ったので、

ここでは、外側が文字列です。シンタックスハイライトをかけてみれば一目瞭然です。

$('td:nth-child('+ myIndex +')').addClass('target');

'td:nth-child('')'がそれぞれ文字列なので、途中の引用符だけ外すとおかしなことになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/02 14:11

    何度も追加で質問失礼します。
    こういった()を文字列扱いにするのは、メソッド()以外の()が文字列の対象と考えていいんでしょうか?
    質問が分かりにくく申し訳ありません。

    キャンセル

  • 2019/02/02 16:25

    jQueryに指定するセレクタは「文字列」です。なので、「”td:nth-child(2)”」のような文字列が必要となります。

    キャンセル

  • 2019/02/02 17:31

    なるほど!
    だから「+」で文字列連結するんですね!
    理解できました、ありがとうございます!

    キャンセル

+2

あなたがここの質問で、code をハイライトさせていれば、解決しています。
markdown を使用してみると良いです。

シンタックスハイライト機能のあるエディタで学習すると良いですよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/02 11:25 編集

    質問者さん
    私も別途コメントしてますが
    マークダウン…質問編集してくださいという意味ですよ。
    というか、回答者さんもおっしゃるように構文チェックしてくれるエディタ使えば質問前に済んだ話ですね。

    キャンセル

  • 2019/02/02 13:59

    すみません、以後気をつけます。

    キャンセル

  • 2019/02/02 17:58

    いやだから、質問は編集できますと…

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る