每个div的Javascript添加+1

Question

我正在尝试制作一个类似于这个img的排名系统，我正在做的是用div替换文本然后改为应该是1,2,3等等。

我想知道的是如何设置每个div文本然后给它应该具有的值。

这是我目前的代码：

function buttonclicked1() {

    allChampions1 = $(".scroll-league > #colzz");

    var selectedChampions1 = allChampions1.filter("[data-ladderdivison_id^='1']");

    allChampions1.hide();
    selectedChampions1.show();

    for (var i = 0; i < array.length; i++) {
        $("div.rank").replaceWith('<div class="table-cell rank" id="rankingchangeonpage">' + i + '</div>');
    }

    document.getElementById("leagueubutton1").className = "Button SemiRound UPDATED";
    document.getElementById("leagueubutton2").className = "Button SemiRound White";
    document.getElementById("leagueubutton3").className = "Button SemiRound White";
    document.getElementById("leagueubutton4").className = "Button SemiRound White";
    document.getElementById("leagueubutton5").className = "Button SemiRound White";

    var index = 0;
    var index1 = index++;

}

Answer 1

我不确定我是否完全理解这个问题，但如果你有一组div正在循环并希望每次增加索引，你可以使用.each()。 http://api.jquery.com/each/

例如，假设图形中的那13行是带有.row类的div：

$('.row').each(function(i, elem) {
    // i is a counter that's 0-indexed, and elem represents the current
    // DOM element being looped over
    var $rank = $(elem).find('.rank');
    // set the innerHtml to 1, 2, 3, etc...
    $rank.html(i + 1);
});

上面的HTML可能如下所示：

<div class="row">
    <span class="rank"></span>
</div>
<div class="row">
    <span class="rank"></span>
</div>    
<div class="row">
    <span class="rank"></span>
</div>    
...