Как с помощью JQuery сделать зебру из элементов страницы

Если информации в таблице или каком-нибудь списке выводится приличное количество, то целесообразно использовать поочередное выделение строчек различными цветами а-ля 'зебру'. И если вы не хотите мучаться с кроссбраузерностью CSS хаков или менять классы у элементов в цикле (к примеру на PHP) на четный / нечетный, то вам на помощь придет JQuery. Смотрим листинги:

JavaScript:

jQuery(document).ready(function($) {

    $('p:odd').css("background-color", "#CCCCCC");
    $('p:even').css("background-color", "#EEEEEE");

});

HTML:

<p>Lorem.</p>
<p>Donec.</p>
<p>Vivamus</p>

В данном несложном примере я раскрасил четные и нечетные абзацы различными оттенками серого цвета.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.