jquery index()


<html>
<head>
    <title></title>
    <script type="text/javascript"  src="jquery-1.9.1.min.js"></script>
    <style>
     .on{background-color:red;}
     .b{width:200px;background-color:green;border:1px solid #000;}
    </style>
</head>
<body>
    <form id="form1" method="post">
    <div class=a><span class="b">aa     a</span></div>
<div class=a><span class="b">bb     b</span></div>
<div class=a><span class="b">cc     c</span></div>
<div class=a><span class="b">dd     d</span></div>
<div class=a><span class="b">ee     e</span></div>
    </form>
</body>
</html>
<script type="text/javascript">
    $(function() {
       //$("div.a").click(function() {
       //         alert($(this).index());               
       //});
        $(".b").click(function() {
                
                var i = $(this).index(); 
                alert(i);/////这里怎么都是0
                $(".b").removeClass("b").eq(i).addClass("on");             
       })
    });
</script>
index 怎么都是0呢