Alternativen div-hintergrund-Farbe

Habe ich eine Struktur wie die folgende:

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

Und es wiederholt sich während einer dynamischen Seite ein paar mal. Ich würde gerne abwechseln, wechseln die Hintergrundfarbe der div-Klasse "post" mit zwei Farben, aber CSS ist nth-child pseudo-class, nur scheint zu funktionieren, mit Elementen, die direkt aufeinander Folgen.

Gibt es eine Möglichkeit (CSS, Javascript, jQuery, etc.) ich kann alternate das div-hintergrund-Farben?

InformationsquelleAutor redgem | 2011-05-30
  1. 27

    jQuery :seltsames und :auch Selektoren sind ziemlich praktisch:

    $(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

    HTML: 

    <div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
...

    http://jsfiddle.net/thomas4g/uaYd9/2/

    EDIT:

    Die nicht-jQuery, schnelle JS Art:

    var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}
    • +1 für die Beantwortung mit einem Beispiel.
    • Danke, ich scheine Probleme mit diesen, obwohl. Ich habe jQuery und habe das: $(document).ready(function() { $(".post:even").css("background-color","blue"); $(".post:odd").css("background-color","red"); }); aber es funktioniert nicht.
    • welche version von jQuery sind Sie darunter? funktioniert der link, den ich gepostet die für Sie arbeiten?
    • 1.5.0 von ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
    • hm, seltsam. welchen browser verwenden Sie? Sie haben getrimmt Ihr code nur zur Verfügung gestellt, dass in meiner Antwort (zu beseitigen eventuelle interferance)?
    • Vielleicht habe ich widersprüchliche/höher-Präzedenzfall CSS. Ich werde meinen code durchzugehen und erhalten Sie zurück. Vielen Dank!
    • guter Punkt. ich werde es hinzufügen. @Rodney righto, viel Glück.
    • Yep, nur ein CSS-Konflikt. Funktioniert Super jetzt! Danke!
    • genial - froh zu helfen!

    InformationsquelleAutor Thomas Shields
  2. 7

    der jquery-Weg:

    $('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');
    InformationsquelleAutor gion_13
  3. 2

    In der Regel, was ich tun ist, weisen Sie die css-Klasse "odd" oder "even" auf dem back-end. Zum Beispiel, wenn die Seite dynamisch generiert in PHP wäre, würde ich so etwas wie:

    for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  //Elements can have multiple css classes
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  //generate html using class="$css_class"...
}

    Dann definieren Sie in Ihrer Klasse die Farben, die Sie wollen, die abwechselnd divs zu haben.

    .row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }
    • Ich kann leider nicht PHP verwenden auf dieser Seite. Danke, aber!
    InformationsquelleAutor King Skippus
  4. 1

    Kann getan werden, mit jquery - :odd und :even Selektoren ganz einfach:

    $(".wrapper div.post:odd").addClass('odd'); 
$(".wrapper div.post:even").addClass('even');

    http://jsfiddle.net/niklasvh/fULRZ/

    InformationsquelleAutor Niklas
  5. 1
    .post:nth-child(odd)

    Nicht für Sie arbeiten?

    • NÖ. Ich glaube, die .post divs müsste genau sequenziell (D. H., kein Elternteil divs umbrechen Sie).
    • Englisch ist meine erste Sprache. Allerdings war ich mir nicht, dass Sie dumm waren. Nur versuchen zu klären, die css, die Sie bisher verwendet, die funktionierte nicht. Ich denke, es war eine Harmlose Frage, die vielleicht besser gesagt in einem Kommentar, aber harmlos trotzdem.
    InformationsquelleAutor Jrod
  6. 0
    :even Selector

    http://api.jquery.com/even-selector/

    Ich hoffe das wird hep Sie

    InformationsquelleAutor zod
Schreibe einen Kommentar