jQuery によるCSSの操作

今回は、jQuery のライブラリの eachメソッドを使ってループをかけ、DOM(Document Object Model)の Class を操作してリストのバックグラウンドのCSSを変更する方法をご紹介します。

 

<head>
<style type="text/css">
  .even { background-color: #ffffff; }
  .odd { background-color: #cccccc; }
 </style>
<script src="./jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
  (function ($) {
    $(document).ready(function() {
        $("ul > li").each(function(i) {
        if (i % 2 ==1) {
        $(this).addClass("odd");
          }
          else {
            $(this).addClass("even");
          }
        });
      });
  }) (jQuery);
</script>
</head>
<body>
  <h2>Plainswalker</h2>
    <ul>
      <li>Ajani</li>
      <li>Jace</li>
      <li>Liliana</li>
      <li>Chandra</li>
      <li>Garruk</li>
      <li>Elspeth</li>
      <li>Tezzeret</li>
      <li>Sorin</li>
      <li>Nahiri</li>
      <li>Nissa</li>
    </ul>
</body>

jQuery からDOM を操作する方法として応用できるのではと思いました。
訂正)Plainswalker のスペルミスを訂正