I'm trying to get the index of a div when its the same mark up for each set. I want to return index of  '1' when a second "yo" is clicked in any "a" and '0' if the first "yo" is clicked in any "a". If i clicked the "yo" which has the color #330000, then i should get 1 not 5. This seems like a simple task but i cannot get it to work.

<div class="a">
    <div class="yo" style="background:#003366;"></div>
    <div class="yo" style="background:#003366;"></div>
</div>

<div class="a">
    <div class="yo" style="background:#33CCCC;"></div>
    <div class="yo" style="background:#33CCCC;"></div>
</div>

<div class="a">
    <div class="yo" style="background:#330000;"></div>
    <div class="yo" style="background:#330000;"></div>
</div>
---
<script type="text/javascript">
    $("document").ready(function() {
   
        $(".a div.yo").click(function(){
            alert($(this).index(this));
        });
      
    });
</script>