■ 案１：「$(”XXX:even/odd”).addClass(”YYY”)」を使用する
サンプル
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>odd/even</title> <style> li { list-style-type:none; width:40%; } .for-even { background-color:orange; } .for-odd { background-color:green; } </style> <head> <body> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script> $(function() { $("li:even").addClass("for-even"); $("li:odd").addClass("for-odd"); }); </script> </body> </html>
参考文献
http://www.takaya-com.jp/archives/2015/10/jquery_odd_even/■ 案２：「$(”XXX:visible:even/odd”).addClass(”YYY”)」を使用する
案１の問題点* 「display:none」などで表示した場合に対応できない => 『:visible』を追加すると解決できた
サンプル
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <title>odd/even</title> <style> li { list-style-type:none; width:40%; } .for-even { background-color:orange; } .for-odd { background-color:green; } </style> <head> <body> <input id="on-off-checkbox" type="checkbox" checked>1/2/4/6を表示/非表示<br> <ul> <li>0</li> <li class="on-off">1</li> <li class="on-off">2</li> <li>3</li> <li class="on-off">4</li> <li>5</li> <li class="on-off">6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script> $(function() { $("li:even").addClass("for-even"); $("li:odd").addClass("for-odd"); $('#on-off-checkbox').change(function() { // 一旦付加したCSSをクリア $("li").removeClass("for-even"); $("li").removeClass("for-odd"); if ($(this).prop('checked')) { $('.on-off').show(500); } else { $('.on-off').hide(500); } // 表示されているCSSを追加 $("li:visible:even").addClass("for-even"); $("li:visible:odd").addClass("for-odd"); }); }); </script> </body> </html>
