Wednesday, January 19, 2011

Add class to first link or third link

The below add a class to the first link. Can also be used for any number using nth


<p id="list">

<a href="#" class="item">Item One</a> - <a href="#" class="item">Item Two</a> - <a href="#" class="item">Item Three</a>

</p>

<script>$("p#list a").first().addClass('highlight');</script>



So to add a class to every third item

<ul id="List">
<li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
    <li>number 11</li>
    <li>number 12</li>
</ul>

<script type="text/javascript">
$(document).ready(function(){
$("ul#List li:nth-child(3n)").addClass("third")
});
</script>

No comments: