JQuery学習メモ nt-child_jqueryの使用

JQuery を使用する場合、コンテナー (div やテーブル内の一部のサブ要素など) を検索する場合は、find メソッドを使用するのが簡単です。 find は反復を使用して条件を満たすすべてのサブ要素を検索し、CSS およびその他のコンテンツを均一かつバッチで設定できます。
たとえば、次のようなテーブルがあります:

コードをコピーします コードは次のとおりです:

🎜>
インライン テーブル、行 1、列 2
;


🎜>



これを直接実行する必要があります。
$("table").css("color", "blue");
注: $("table") は、ページ上の「すべてのテーブル」がこのように設定されていることを意味します。

以下の複雑な例を見てください -
[各テーブルの 2 行目と 2 列目のフォントを赤に設定します]

おそらくあなたはこのように考えるかもしれません - なぜなら $(" table") は「各テーブル」を意味するので、「$(table tr:eq(1) td:eq(1)).css("color","re​​d"); と書けば完了です (2 行目ごと)。
これは本当にそうなのでしょうか? 結果を実行すると、「インライン テーブル、行 1、列 1」だけが赤色になるので、驚くでしょう。これは予想した結果ではありません。
理由は単純です。JQuery が HTML タグやその他の関連属性をスペースで区切ると、条件が満たされるまで 1 つずつ自己タグを検索することになるからです。親テーブルで、条件を満たす 2 番目の tr を見つけて、次に 2 番目の tr 内の最初の td を見つけて、それを赤に染めます。」 ”
完全な定義を以下に示します -
$("HTML タグ、html サブタグ: eq(n) html サブサブタグ: eq(n)...): HTML タグより(親) 条件を満たす n 番目の 1 番目のサブタグを検索し、次に n 1 番目のサブタグ内の n 1 番目のサブタグをすべて検索するまで検索します。
つまり、特に初心者にとって、この方法は間違っています。

それではどうすればいいでしょうか？誰かがこの方法を考えました -




コードをコピー


コードは次のとおりです:


$(" table" ).each(function () {
$(this).find("tr:eq(1) td:eq(1)").css("color", "red");
}) ;

その理由は、各テーブルを走査し、各テーブルの 2 行目と 2 列目の色を設定するためです。 最初の回答と比較すると、2 番目の人は少し賢いようです。彼は、「table」親タグが単独で繰り返し検索されないことに気づきました (JQuery は、タグ。ラベル、つまり青で定義される「...」の無限部分です。それで、私はそれぞれを使用することを考えました - 確かに、それぞれがテーブルを深く走査する問題を解決しますが、最初のテーブルの検索は依然として青い部分に従って実行されます（親テーブルで2番目のtrを探し、2番目のtrをまだ探しています） 2 番目の tr の tr。2 番目の td)、find は最後の HTML の詳細なトラバースのみを実行します。 現時点では、次のメソッドのみを使用できます:

$("tr:nth-child(2) td:nth-child(2)").css("color", "red" );

nth-child(n) は、JQuery で使用できる CSS 疑似クラスのメソッドです。このコードの意味は、n 番目の tr に最も近いコンテナ要素を検索し、それを設定することです。 。
このように、「tr:nth-child(2)」は2つの

インライン テーブル、行 1、列 1
行 2、列 1	🎜>行 2 列 2
最初のテーブル、行 2、列 1 < /td>

にそれぞれ対応します。したがって、スタイルを設定できます。