ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery学習メモ nt-child_jqueryの使用

JQuery学習メモ nt-child_jqueryの使用

WBOY
WBOYオリジナル
2016-05-16 18:12:001114ブラウズ

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");
}) ; $("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>
にそれぞれ対応します。したがって、スタイルを設定できます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。