日: 2017年12月28日

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 のスペルミスを訂正