Prečo nie je toto jquery a css konzistentné v html tabuľkách? - jquery, css, jquery-selectors, html-table

Mám nasledujúci kód jQuery a:

$("table.altRow > tbody > tr:odd").addClass("oddColor");
$("table.altRow > tbody > tr:even").addClass("evenColor");

a nasledujúce css:

.altRow tbody tr.evenColor { background-color : #e9e9e9; }
.altRow tbody tr.oddColor { background-color : #ffffff; }

a zdá sa, že prináša nekonzistentné výsledky

niektoré tabuľky majú na prvej triede TR „evenColor“ a iné na prvú časť TR pridali „triedColor“ ako triedu.

Nejaký dôvod, prečo by to nebolo konzistentné? Bol by som rád, keby bol biely (#ffffff) riadok vždy vždy farbou prvého riadku tela

Ak mám dve tabuľky na jednej stránke. Jeden kladie evenColor na prvý riadok jednej a druhá tabuľka mala oddColor ako triedu prvého riadku druhej tabuľky.

Nejaké návrhy?

odpovede:

0 pre odpoveď č. 1

To je preto, že jQuery :odd a :even selektory platí pre zoznam všetkých vybraných prvkov, bez ohľadu na ich postavenie v ich kontextoch.

Ak chcete používať jQuery, použite :nth-child(odd) a :nth-child(even) namiesto toho týmto spôsobom:

$(".altRow tbody tr:nth-child(odd)").addClass("oddColor");
$(".altRow tbody tr:nth-child(even)").addClass("evenColor");

1. Zjednodušte výber, nemusí to byť tak dlho. Ak použijete triedu altRow na <tbody> môžete použiť selektory ako .altRow tr:nth-child(even)

2. Používajte iba CSS bez jQuery:

   .altRow tr { background-color : #e9e9e9; }
   .altRow tr:nth-child(odd) { background-color : #ffffff; }
   

   V IE8-, :nth-child je podporované iba použitím Selectivizr alebo podobné knižnice.

---

0 pre odpoveď č. 2

:odd vyberie prvky nie v súvislosti s ich rodičmi (ako v deviatom Tr v jeho tabuľke), ale v rámci DOM ako celku.

Ak chcete príklad, pozrite sa na toto: http://jsfiddle.net/PGdMz/

A ak nerozumiete, prečítajte si tento výňatok z webovej stránky jQuery:

In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

Čo by ste mali urobiť, je napísať toto:

$("table.altRow > tbody > tr:nth-child(odd)").addClass("oddColor");
$("table.altRow > tbody > tr:nth-child(even)").addClass("evenColor");

A ak to aktualizujem v príklade:

http://jsfiddle.net/PGdMz/1/

---