jQuery の 10 個の非常に便利なトラバーサル関数

jQuery を使用すると、 HTML要素を簡単に選択できます。しかし、 HTML構造がより複雑になると、選択した要素を調整するのが面倒になる場合があります。このチュートリアルでは、使用するコレクションを調整および拡張する 10 の方法を検討します。

HTML

まず、以下に示す簡単なページを見て、このチュートリアルを通じて要素を選択していきます。

1. div.container はラッピング要素です。
2. div.photo 、 div.title 、およびdiv.rated はdiv.containerの直接の子です。
3. 各div.star はdiv.ratedの子です。
4. div.satrのクラスが"on"の場合、完全なstaです。
5. 。
6. なぜトラバースするのか？

   「なぜ一連の要素をさらに改良する必要があるのでしょうか? jQuery の選択構文が十分強力ではないためですか? 」

   さて、例から始めましょう。上記の Web ページでは、星をクリックしたときに、それにクラス "on"を追加し、左側の各星を追加する必要があります。同時に、すべてのスターの親要素の背景色を変更したいので、コードは次のようになります。

   2 行目では、クリックした現在のオブジェクトを取得します。しかし、星の親を取得するにはどうすればよいでしょうか?それが分割評価です。ただし、1 ページ内に多数の評価が含まれています。どれが欲しいですか？ 「this」の左側にあるすべての星を取得するにはどうすればよいですか?

   良いニュースは、 jQuery を使用すると、これらの基本的な関係に基づいて、既存のコレクションに基づいて要素の新しいコレクションを取得できることです。ここでトラバーサル機能が活躍します。

   1.子供たち

   この関数は、一連の要素の直接の子を取得します。

   これは多くの状況で非常に便利です。以下の図を見てください。

   1. 最初に、コンテナ内のすべてのスターが選択されています。
   2. 選択式をChildren()に渡して、選択結果を選択したstarに絞り込みます。
   3. Children() がパラメータを受け入れる場合、すべての直接の子が返されます。
   4. 孫要素は返されません。
   5. 

   $('.star').click(function(){

            $(this).addClass('on');

   //        現在のオブジェクトの親要素を選択するにはどうすればよいですか?

   //        現在の星の左側にあるすべての星を取得するにはどうすればよいですか?

   });