Stil für ungerade angezeigte Kinder

Ich suche einen Weg, um bestimmte Stile auf ungerade (oder gerade) Kinder anzuwenden, die angezeigt werden (also versteckte Kinder ausgenommen). Optionnaly, wenn diese Stile angewendet werden, wenn versteckte Kinder angezeigt werden, wäre es perfekt! HierStil für ungerade angezeigte Kinder

ist eine Live-Sandbox: http://jsfiddle.net/zrges/1/

Und hier ist das, was ich visuell wollen: http://jsfiddle.net/qJwFj/ (natürlich, es ist nur ein Anzeigebeispiel, nehmen Sie nicht Sorge für die crappy Code, den ich für das schrieb)

Ich kann nicht mit guten Pseudoklassen, CSS-Selektoren umgehen, um damit umzugehen.

Ich hoffe, eine vollständige CSS/HTML-Lösung zu haben (keine js/php ein, die leichter ist)

Thank you very much!

tr.sub { display: none; } 
.color { background: blue; }

js:

Quelle

2012-04-13 Guile

Dies hat einige Male gefragt worden (noch ich Ich habe alle möglichen Probleme, ein * gutes * Duplikat zu finden); Die Antwort ist immer noch nein, Sie können es nicht mit reinen CSS-Selektoren tun, es sei denn, es gibt ein Muster in irgendeiner Form. – BoltClock

@ BoltClock's Einicorn Ich hatte die gleichen Schwierigkeiten, eine Antwort zu finden. Wenn du also sagst, dass es ein Duplikat ist, tut es mir leid und ich werde versuchen, alle Antworten zu finden. Danke – Guile

-1

Für Tabellen können Sie

tr:nth-child(even) { // your style } 
tr:nth-child(odd) { // your style}

oder

tr:nth-child(2n+0) { // your style } 
tr:nth-child(2n+1) { // your style}

Quelle

2012-04-13 09:57:58

Der Selektor [': nth-child'] (http://stackoverflow.com/tags/nth-child/info) betrachtet nur die Geschwisterposition, unabhängig von den anderen Selektoren. Das schließt versteckte Kinder nicht aus, wie in der Frage gefordert. –

Ich habe den Teil "versteckte Kinder" verpasst. Du hast recht. –

css verwenden

$(document).ready(function() { 
    $('table tr:visible:even').addClass('color'); 

    $('#toggle').click(function() { 
     $('table tr').removeClass('color'); 
     $('table tr.sub').toggle(); 
     $('table tr:visible:even').addClass('color'); 
    }); 
});

Quelle

2012-04-13 10:05:25 candyleung

Check this out: http://jsfiddle.net/qbXVV/18/

HTML:

<button id="toggle">Toggle it!</button> 
<table> 
    <tr class="sub"><td>Row 1</td></tr> 
    <tr class="tag"><td>Row 2</td></tr> 
    <tr class="sub"><td>Row 3</td></tr> 
    <tr class="tag"><td>Row 4</td></tr> 
    <tr class="sub"><td>Row 5</td></tr> 
    <tr class="tag"><td>Row 6</td></tr> 
    <tr class="sub"><td>Row 7</td></tr> 
</table>

CSS:

 tr:nth-of-type(even),.bg { 
     background-color: gray; 
    } 

    .hidden { 
     display:none; 
    }

JS:

$(document).ready(function() { 
$('#toggle').click(function() { 
    $('.tag').toggleClass("hidden"); 
    $(".sub:nth-child(4n+1)").toggleClass("bg"); 
}); 
});

Quelle

2012-04-13 10:28:32 Ankit

Bitte geben Sie den Code in Ihre Antwort ein. – BoltClock

Der Code hinzugefügt ... Bearbeitet meinen Hauptpost. – Ankit

Stil für ungerade angezeigte Kinder

Antwort

Verwandte Themen