Using Jquery to append div index within same div

I have a basic set-up like this:

<div class="stop">
    <span class="point"></span>
</div>
<div class="stop">
    <span class="point"></span>
</div>

and I would like to append the index of div.stop within the nested span.point of each, like this:

<div class="stop">
    <span class="point">1</span>
</div>
<div class="stop">
    <span class="point">2</span>
</div>

This is the jquery I'm using, but it's not working:

开发者_开发问答$("div.stop").each(function() {
    var stopNumber = $("div.stop").index(this);
    $("div.stop span.point").append(stopNumber);
});

Thanks in advance for any tips or suggestions.

-Brian

There's no need for the index call, .each supplies the index as a parameter to the callback:

$("div.stop").each(function(n) {
    $('span.point', this).append(n + 1);
});

See http://jsfiddle.net/55ABr/

You want to select the point within the div stop. Try this:

$("div.stop").each(function() {
    var stopNumber = $("div.stop").index(this);
    $("span.point", this).append(stopNumber);
});

Try this:

$("div.stop").each(function(i, el) {     
    $("span.point", this).text(i+1); 
});