Add a sequential class number to each item

This JS adds a sequential class number to each item. [email protected]

by Ryan Brackett

HTML

<ul>
    <li><a href="http://www.dorseyalston.com/agents/sites/ansley.alexander/">
  <img src="http://www.dorseyalston.com/photos/agent_photos/65AnsleyAlexander.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/ansley.alexander/"> Ansley Alexander </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/dawn.anderson/"><img src="http://www.dorseyalston.com/photos/agent_photos/73DawnAnderson.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/dawn.anderson/"> Dawn Anderson </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/karen.anderson/"><img src="http://www.dorseyalston.com/photos/agent_photos/48KarenAnderson.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/karen.anderson/"> Karen Anderson </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/harry.angevine/"><img src="http://www.dorseyalston.com/photos/agent_photos/70HarryAngevine.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/harry.angevine/"> Harry Angevine </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/diane.arnold/"><img src="http://www.dorseyalston.com/photos/agent_photos/30DianeArnold.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/diane.arnold/"> Diane Arnold </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/nancy.ayres/"><img src="http://www.dorseyalston.com/photos/agent_photos/12NancyAyres.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/nancy.ayres/"> Nancy Ayres </a> 
    </li>
    <li><a href="http://www.dorseyalston.com/agents/sites/irene.bagiatis/"><img src="http://www.dorseyalston.com/photos/agent_photos/32IreneBagiatis.jpg" alt="Click to View"></a>  <a href="http://www.dorseyalston.com/agents/sites/irene.bagiatis/"> Irene Bagiatis </a> 
    </li>
    <li><a...

CSS

body {
    padding: 0px;
    margin: 0px;
}
ul {
    margin: 0px;
    padding: 0px;
}
li {
    float: left;
    width: 10%;
    font-size: 8px;
    height: 0px;
    padding-bottom: 14%;
    list-style: none;
    overflow: hidden; position: relative;
}
li img {
    width: 100%; position: absolute;
    -webkit-transition: all .1s ease;
		-moz-transition: all .1s ease;
        -ms-transition: all .1s ease;
        -o-transition: all .1s ease;
		transition: all .1s ease;
    
}
li:hover img { width: 200%; z-index: 999; margin-left: -50%; margin-top: -50%;}

JavaScript

// Adds a sequential class number to each item

$("ul li").each(function (i) {
    i = i + 1;
    $(this).addClass("item-" + i);
});