JQuery学習ノートnt-childの使用

JQueryを使用するときにdivやtableなどのコンテナの一部のサブ要素を探したい場合は、findメソッドを簡単に使用します.findは反復を使用して条件に合致するすべてのサブ要素を探し、cssなどの内容を統一し、一括して設定することができます.
例えばtableというものがあります.

 
  








 
  
 
  
 
  









 
  
 
  
 
  
  Table， 1 1 
  
 
  
 
  
  Table， 1 2 
  
 
  
 
  
 
  
 
  
  Table， 2 1 
  
 
  
 
  
  Table， 2 2 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
   Table， 2 1 
  
 
  
 
  
   Table， 2 2 
  
 
  
 
  
 
  
 
 

すべてのフォントを青に設定する必要があります.直接そうすればいいです.
$("table").css("color", "blue");
注意:$(「table」)は、ページ上の「各table」がこのように設定されていることを示します.
複雑な例を見てみましょう
【tableごとの2行目2列目のフォントを赤に設定】
$(「table」)は「tableごと」を表すので、$(table tr:eq(1)td:eq(1)).css(「color」、「red」)と書けば、(tableごとの2行目の2列目)......
本当にそうですか.結果を実行すると、「Tableが埋め込まれていて、行1列1」が赤くなっています.これは私たちが予想した結果ではありません.
なぜかというと、JQueryはhtmlタグやその他の関連属性をスペースで分割すると、「親タグ」から1つずつ自タグを探し、条件を満たすまでを意味します.結果として「親tableですべてのtrを探し、条件を満たす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"); 
  
}); 
  
 
 

彼の理由は、各tableを巡り、各tableの2行目の2列目に色を設定することです.
1つ目の答えに比べて、2人目は少し頭がいいようで、「table」の親ラベルは自分で繰り返し探さないことを悟った(JQueryは前のラベルのセットの時に一番奥のラベル、つまり青の定義の「......」の無限大な部分を深く遍歴するだけだ).そこでeach――と考えると、eachは確かにtableを深く遍歴する問題を解決したが、最初のtableのfindは依然として青い部分の考え方で実行されている(親tableの2番目のtr、2番目のtrの2番目のtdを探している)、だからfindも末尾のHTMLだけが深く遍歴している.
この場合、このような方法しか使用できません.
$("tr:nth-child(2) td:nth-child(2)").css("color", "red");
nth-child(n)はCSS擬似クラスの1つの方法であり、JQueryに使用することができる.このコードは、n番目のtrから最も近いコンテナ要素を探して、自分で設定することを意味する.
これにより、「tr:nth-child(2)」がそれぞれ2つに対応し、スタイルを設定できます.