Select Every 3rd Item, Ignoring Elements with a Certain Class

by Matthew Keefe

HTML

<div class="container12">
    <div class="grid_12">
        <div class="grid_4">
            <ul class="nav">
                <li>List 1, item 1</li>
                <li class="foo">List 1, item 2 (ignored)</li>
                <li>List 1, item 3</li>
                <li>List 1, item 4</li>
                <li>List 1, item 5</li>
                <li>List 1, item 6</li>
                <li>List 1, item 7</li>
                <li>List 1, item 8</li>
                <li class="foo">List 1, item 9 (ignored)</li>
                <li>List 1, item 10</li>
                <li>List 1, item 11</li>
                <li>List 1, item 12</li>
                <li>List 1, item 13</li>
                <li>List 1, item 14</li>
            </ul>
        </div>
    </div>
</div>

CSS

.alpha { color:red; }
.foo { font-weight:bold; }

JavaScript

$(".container12 > .grid_12 > .grid_4 li:not('.foo')")
        .filter(function (index) { return index % 3 === 0; })
        .addClass("alpha");