トラバースを勉強してふとした疑問です。

Question

jQueryで今、トラバースを勉強しています。

そこで、

$(function(){
$('table').find('td').on('click', function(){
$(this).css('background-color', 'lightblue');
});

というのが出てきて、、、

$('table').find('td').

この部分を、

$('table td')

ではダメなのかなとふと思いました。

初歩的な質問だと思いますが、教えていただければ嬉しいです！

Answer 1

jQuery日本語リファレンスのサンプルに似たケースについて説明があります。

参考情報：

• jQuery日本語リファレンス find(expr) http://semooh.jp/jquery/api/traversing/find/expr/

...
指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。
この関数は、処理中の要素から更に絞込みをかけるのに便利である。
...
全てのp要素からfindを用いてspan要素を捜し、色を赤くします。これは$(“p span”)と同じ意味である。
$("p").find("span").css('color','red');
...

• jQeryの基本まとめ - CSSセレクタを使おう - http://qiita.com/upto_me/items/31429332e0415548a9f8

...
$('要素A 要素B') 要素Aの内側にある要素B
...

Comments

[ShunYoshizawa]

回答ありがとうございます！

確認させていただきます！

Answer 2

すでに回答が付いていますが、興味をもったのでベンチマークテストしてみたところ$('div div')>=$(document.querySelectorAll('div div'))>>>>$('div').find('div')でした。10倍以上速度が違いました。

Comments

[ShunYoshizawa]

回答ありがとうございます！

わざわざテストしていただきありがとうございます！！！

Answer 3

それでも特に問題ありません。

jQueryのDOMツリー検索メソッドの中には、セレクタとして書けるものも多くあります。

Comments

[ShunYoshizawa]

回答ありがとうございます！

複雑な場合はトラバースを使ったほうが良いということが分かりました！