Javascript検索要素

| | |

jQueryのfind()メソッドはおなじみのように聞こえるかもしれませんが、JavaScriptの find()メソッドと混同しないでください!どちらも「検索」するものですが、それらは何ですかリターンは大きく異なる場合があります。 JavaScriptでは、 find()メソッドは配列でのみ呼び出すことができます。

コールバック関数が必要です。これは、引数としてメソッドに渡される関数です。後で電話します。コールバック関数で説明されている要件を満たす最初のアイテムを検索して返します。

jQueryのfind()メソッドはまったく異なります。すべてのjQueryメソッドと同様に、セレクターで呼び出されます。このセレクターで検索し、このセレクターの子要素のみを操作します。この高レベルの操作は、同じ親要素に含まれる他の要素ではなく一部の要素を変更する場合に役立ちます。

jQuery find()の使用

jQueryがわかった find()は、特定のセレクターのすべての子要素を選択するために使用されます。いくつかのコードサンプルをチェックして、jQuery find()の使用方法を確認してください。

簡単に始めて、次のセクションで複雑さを加えましょう。ページの読み込み後に要素を操作して、 find()がどのように機能するかを示すことができます。ページが読み込まれた後、段落のコンテキストでいくつかの単語の色を変更するのはどうですか?ここから始めましょう:

他のすべての単語は同じままです。

このコードを見ると、

いくつかの<スパン>要素。 要素の1つは、

要素の子です。もう1つのは、クラスが緑の

<クラスの顔= "WP-画像ブロック"> 「IR3bnpJdRzIwsq現在変更します find()の動作を説明するためのテキストの色。これを実現するには1つのCSS属性を変更するだけでよいため、これは初心者にとって素晴らしいステップです。要素

をセレクターとして<に渡すcode> find()、jQueryの css()メソッドを使用して色を変更できます:

最初にfind()を使用するときは、すべての要素

を選択します。 find()を使用して、

の子であるすべての要素を検索します。この例では、それは単に青という言葉です。次に、 css()メソッドを使用して、色を青に変更します。

find()の2回目の使用時。今回は、緑色のクラスを持つの子である別の要素を見つけることです。

繰り返しますが、これは単なる緑色の単語です。最初の行については、 css( )メソッドで色を緑に変更します。

実行して何が起こるか見てみましょう!

X NmmVK1C Z30uO5sa15iVH9aCEO ASkwA4cuqwxOagZqMkO8QpJd AlJeZH2NXXSALKH8lWknoNiwXquCqxMuztLiG CL0FzyoN60rr OR3aktZVCcmRgyHPk7Fd7hsjGON74Pi

注青色とそのG reenワードは、クラスまたはIDが割り当てられていないspan要素に含まれていました。これらの単語を再び分離し、色を変えることができました。ご想像のとおり、これはの主要な要素が異なるためです。

は青い単語のの親です。 は、単語greenを含むの親です。

これは、 find()がセレクターとして使用される要素の子を検索するために発生しました。追加しましょうやや複雑で、やることリストの例を見てください。

リスト内のjQueryfind()

この例では、やることリストがあります。やるべきことがあります。今日ですが、それを行うには店から物を購入する必要があります。これらのアイテムを購入したら、リストから削除して1日を続けることができます。リストは次のとおりです。

ここにリストがあります。

  • ;「ストアに移動」、「ゴミ箱を取り出す」、「料理をする」の要素が、私たちの子である