- 締切済み
jQuery、tdマウスオーバー、行の先頭th操作
jQueryについて質問です。 <!DOCTYPE html><html><head> <style type="text/css"> th.e {background-color:orange;} </style> </head><body> <table border='1' cellspacing='0'> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <th>test</th> <td>A</td> <td>B</td> <td>C</td> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $("table td").mouseover(function(){ $(this).parent().find("th").toggleClass("e"); }).mouseout(function(){ $(this).parent().find("th").toggleClass("e"); }); </script> </body></html> 上記で動いて嬉しかったのですが、もやもやしています。 this → parent → find が遠回りでスカッとしません。 スカッとする方法はありますか？
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
たいして変わりませんけれど、 $(this).siblings("th") とかでは？
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
どういう状態になればスカッとしますか？ 日本語で説明してみてください。 例） tdを順番にたどりたい ※jQueryを使ったnodeNameの取り方がわかりません。 $jqObj=$(this); while( $jqObj ){ if($jqObj.get(0).nodeName==='TH'){ $jqObj.toggleClass('e'); } $jqObj=$jqObj.prev(); } 図にするとこう。 $(this)が<td>C</td>だとすると、 <tr> <th>test</th> <- prev().prev().prev() <td>A</td> <- prev().prev() <td>B</td> <- prev() <td>C</td> <- this </tr> 未検証です。 もっと効率的なたどり方があると思いますが、jQueryの使い方がよくわかりません。
- mohumohu23
- ベストアンサー率37% (438/1176)
固定して存在する要素をターゲットとするなら、その要素にユニークなidを入れ、そのｉdで参照するのが本当は良い。 そのだしてるやり方ってのは、ペアレント要素の中の子要素をforで回してタグネームのプロパティでthが存在するかというのを都度おこなうことになる。 同じように指定クラス名で検索し指定するよりもidで指定できたほうが、より高速で負荷の少ないプログラムといえる。 jqueryに限らずdojo等でもこれは同様で、例にだしてる物だと普通thは一個が頭にあるだけなので負荷は少ないけど、単一の存在を指すのであればidのほうが良い。
