Q&A
今回の質問だと
ヘッダー用のTR１つ、ボディ用の２つで十分でですよね。
ヘッダ用とボディ用は それぞれ <thead>/<tbody> で分けるのがよろしいかと
解決したいこと
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()の要素番号も文字列だと認識しています。
ただ、その要素番号は変数に入れています。今まで実行した課題で変数を扱った場合、「''」(クォーテーション)は使用していませんでした。
そこで上記の納得のいかない箇所のご説明と、改めて「''」(クォーテーション)の使いどころを教えて頂ければと思い、質問させていただきました。
一応ググったのですが分かりませんでした...。
コードはマークダウンのcode機能を利用してご提示ください
mts10806さん、初回でマークダウンのcode機能に気づきませんでした。
以後、気をつけます。
質問は編集できるので適宜ご対応いただければと。
回答2件
0
あなたがここの質問で、code をハイライトさせていれば、解決しています。
markdown を使用してみると良いです。
シンタックスハイライト機能のあるエディタで学習すると良いですよ。
投稿2019/02/02 00:28
退会済みユーザー
総合スコア0
ご回答ありがとうございました。
すみません、bracketsを使用しています。
maisumakunさんのご回答で()が文字列であることは確認できたのですが、
それだとしたら(+'myIndex'+)で良いかと思うんですが動きません...
'td:nth-child(hoge)' の hoge の部分を myIndex にしたいという表現なのですけど、(+'myIndex'+) だと 'td:nth-child(+hoge+)'になります。
＊追記
(+'myIndex'+) → 正しくは(+' + myIndex + '+)
質問者さん
私も別途コメントしてますが
マークダウン…質問編集してくださいという意味ですよ。
というか、回答者さんもおっしゃるように構文チェックしてくれるエディタ使えば質問前に済んだ話ですね。
すみません、以後気をつけます。
いやだから、質問は編集できますと…
0
ベストアンサー
myIndexは変数になり「''」(クォーテーション)がいらないと思ったので、
ここでは、外側が文字列です。シンタックスハイライトをかけてみれば一目瞭然です。
javascript
1$('td:nth-child('+ myIndex +')').addClass('target');
'td:nth-child('と')'がそれぞれ文字列なので、途中の引用符だけ外すとおかしなことになります。
投稿2019/02/02 00:25
総合スコア145184
ご回答ありがとうございます。
nth-childの()も文字列になるのですか？
はい、ここではそうなっています。
何度も追加で質問失礼します。
こういった（）を文字列扱いにするのは、メソッド（）以外の（）が文字列の対象と考えていいんでしょうか？
質問が分かりにくく申し訳ありません。
jQueryに指定するセレクタは「文字列」です。なので、「”td:nth-child(2)”」のような文字列が必要となります。
なるほど！
だから「+」で文字列連結するんですね！
理解できました、ありがとうございます！
あなたの回答
tips
プレビュー
