jQuery nth-child(even)_jqueryに一致するCSSセレクターのパリティを学ぼう

これに関連して、CSS3 標準における nth-child() の使用法を簡単に紹介します。

CSS3 疑似クラス セレクター: nth-child()

nth- の簡単な概要child() はいくつかの用途があります。

最初: nth-child(number) は、number 番目の要素と直接一致します。パラメータ番号は 0 より大きい整数である必要があります。

(EG) li:nth-child(3){background:orange;}/*3 番目の LI の背景をオレンジに設定*/

2 番目: nth-child( an) a の倍数であるすべての要素に一致します。パラメータanの文字nは、3n、5nなどの複数記述の記号です。
(EG) li:nth-child(3n){background:orange;}/*3 番目、6 番目、9 番目、...、3 LI の倍数すべての背景をオレンジ色に設定*/
3 番目:nth-child(an b) および :nth-child(an-b) 最初に要素をグループ化します。各グループには a があり、b はグループ内のメンバーのシリアル番号です。文字 n とプラス記号はデフォルトにできません。 , 位置を交換できないのは、この書き方の特徴であり、a と b は両方とも正の整数または 0 です。 3n 1、5n 1 など。ただし、プラス記号は、グループ内の a-b 番目のものと一致するマイナス記号に変更できます。 (実際には、an の前にマイナス記号を付けることもできますが、それは次の部分に残します。)
(EG)li:nth-child(3n 1){background:orange;}/* 1 番目と一致します。 4 番目、7 番目、...、3 の各グループの 1 番目の LI*/
li:nth-child(3n 5){background:orange;}/*5、8、11、... と一致します。 、5 番目、8 番目、11 番目、... 最初の LI*/
li:nth-child(5n-1){background:orange;}/* は 5th-1=4 と 10th-1 に一致します。 = 9. ...、5 番目の倍数 - 1 LI*/
li:nth-child(3n±0){background:orange;}/*(3n) と同等*/
li:nth -child (±0n 3){background:orange;}/*(3) と同等*/
4 番目: nth-child(-an b) ここで 1 つの負の値と 1 つの正の値をデフォルトにすることはできません。そうでない場合は意味がありません。 。これは :nth-child(an 1) に似ており、どちらも最初のものと一致しますが、違いは、b 番目の子から開始して逆方向にカウントするため、最大でも b まで一致することです。
(EG) li:nth-child(-3n 8){background:orange;}/*8 番目、5 番目、2 番目の LI と一致*/
li:nth-child(-1n 8) {background: orange;}/* または (-n 8)、最初の 8 (8 番目を含む) LI と一致します。これはより実用的で、最初の N 個の一致を制限するためによく使用されます */

5 番目: nth-child (odd) と :nth-child(even) は、それぞれ奇数と偶数の要素に一致します。奇数 (odd) は (2n 1) と同じ結果になり、偶数 (even) は (2n 0) および (2n) と同じ結果になります。


ストライプ効果を実現するには、jQuery で次のメソッドを使用します。

$("table tr:nth-child(even)").addClass("ストライプ"); >
さえも他のパラメータに置き換えることができ、上記の 5 つの状況はすべて許容されます。

ストライプの後の addClass("ストライプ") は CSS クラス名です。

jquery を学習しながら、CSS のセレクターもいくつか学習しました。
このまま続けていただければ幸いです。