2010-02-28 4 views
1

У меня есть Унция товара. Я хочу, чтобы чередовать там цвет фона вот HTMLПеременный цвет фона элементов в неупорядоченном списке

<html> 
    <head> 
    <title>JQuery Problem 1</title> 
    <script type="text/javascript" src="jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="problem1.js"></script> 
    </head> 
    <body> 
    <ol> 
     <li>Comp 250 
     <ul> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>CGI</li> 
      <li>PHP</li> 
      <li>JavaScript</li> 
     </ul> 
     </li> 
     <li>Comp 345 
     <ul> 
      <li>Objects and classes</li> 
      <li>Static and constant members</li> 
      <li>Operator overloading</li> 
      <li>Templates</li> 
      <li>Inheritance</li> 
      <li>Polymorphism</li> 
     </ul> 
     </li> 
     <li>Comp 431 
     <ul> 
      <li>Perl language</li> 
      <li>File uploads and downloads</li> 
      <li>AJAX and JSON</li> 
      <li>Java Servlets</li> 
      <li>JSP</li> 
     </ul> 
     </li> 
    </ol> 
    </body> 
</html> 

Вот та JQuery

$(document).ready(function() 
{ 


    $("ol > li").css({margin: "1em", fontWeight: "bold"}); 
    $("ol li li").css({fontWeight: "normal"}); 
    $("ul li").css('border', '1px solid white'); 

    $("ul li").hover(function() 
     { 
      $(this).css('border', '1px solid red'); 
     }, 
     function() 
     { 
      $(this).css('border', '1px solid white') 
     }); 


}); 

Теперь я хочу, чтобы чередовать, то первый элемент в ул всегда должна быть #FDD и второй #FFD

ответ

3

Одна версия линия:

$("ol > li").filter(":nth-child(odd)").css("background", "#FDD") 
    .end().filter(":nth-child(even)").css("background", "#FFD"); 

Две линии Versi на:

$("ol > li:nth-child(odd)").css("background", "#FDD"); 
$("ol > li:nth-child(even)").css("background", "#FFD"); 

или с помощью each():

$("ol > li").each(function(i, val) { 
    $(this).css("background", i & 1 ? "#FFD" : "#FDD"); 
}); 
Смежные вопросы