:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen
Mit der CSS-Pseudoklasse :nth-child lassen sich Elemente nach einem berechneten Muster ansprechen. Ein häufiges Anwendungsgebiet ist beispielsweise das abwechselnde Einfärben von Tabellenzeilen. Einen ausführlichen Artikel zu dieser CSS-Eigenschaft habe ich bereits vor einiger Zeit veröffentlicht.
Leider unterstützt der Internet Explorer das Pseudoelement erst ab Version 9, doch mit ein wenig JavaScript kann das Verhalten ebenfalls erreicht werden.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
:nth-child über jQuery ansprechen
Das Prinzip ist denkbar einfach. Da jQuery im Gegensatz zum Internet Explorer die :nth-child-Pseudoklasse verstehen kann, fügen wir per JavaScript den entsprechenden Elementen eine zusätzliche Klasse namens .missingNth hinzu. In diesem Beispiel sollen die Tabellenzeilen (tr) der Tabelle .demo abwechselnd gefärbt werden.
$('table.demo tr:nth-child(2n+1)').addClass('missingNth');
Im CSS-Code erhält diese Klasse dann die gleichen Eigenschaften wie die eigentliche Pseudoklasse.
table.demo tr:nth-child(2n+1) { /* code für gute browser */ }
table.demo tr.missingNth { /* code für <IE9 */ }
Da die Funktion nur in alten IEs benötigt wird, sollte der JavaScript-Code über einen Conditional Comment ausgegeben werden.
Links zum Thema
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Das könnte dich auch interessieren
7 Kommentare
Kommentar verfassen
Wofi
Verfasst am 23. Oktober 2012 um 9:57 Uhr.
Interessanter Lösungsansatz, ich verwende dafür die Selectivizr Bibliothek. Da muss ich nicht extra Klassen bereitstellen. Wenn man nth-child nur sehr wenig einsetzt ist dein Vorschlag sicher performanter. Selectivizr jedoch komfortabler.
Jonas Hellwig
Verfasst am 23. Oktober 2012 um 10:41 Uhr.
Danke für den Tipp mit http://selectivizr.com/. Das Tool kannte ich noch gar nicht.
Dean
Verfasst am 23. Oktober 2012 um 21:38 Uhr.
Das funktioniert auch mit allen Pseudoklassen? Also auch :before und :after oder :last-child, :first-child? Auf den 6er wird – zumindest bei uns in der Agentur – nicht mehr angepasst.
Jonas Hellwig
Verfasst am 23. Oktober 2012 um 22:34 Uhr.
Ich denke es funktioniert mit allen Pseudoklassen. Bei
:beforeund:afterist es natürlich etwas schwierig das Pseudoelement übercontent:'';zu erzeugen.Wofi
Verfasst am 24. Oktober 2012 um 8:04 Uhr.
Sicher, es funktioniert wunderbar … sehr praktisch ist auch die unterstützung der Attributsselektoren.
Günther
Verfasst am 19. Dezember 2013 um 15:40 Uhr.
Noch eine kleine Falle gibt es, die man evtl berücksichtigen muss, wenn es um mehr als eine einfache „Zebratabelle“ geht: In der jQuery API-Dikumentation ist zu lesen, „Because jQuery’s implementation of :nth-selectors is strictly derived from the CSS specification, the value of n is „1-indexed“, meaning that the counting starts at „1“. For other selector expressions such as :eq() or :even jQuery follows JavaScript’s „0-indexed“ counting.“
Wer in modernen Browsern – wie in obigem Beispiel – mit :nth-child(2n+1) das 1., 3., 5. usw. Kind-Element anspricht, muss dieses Beispiel in jQuery folglich etwas anpassen. Dort muss es nämlich zu
$(‚table.demo tr:nth-child(2n-1)‘).addClass(‚missingNth‘);
umformuliert werden – also mit einem Minuszeichen anstelle des Pluszeichens im mathematischen Ausdruck.