如何在 Isotope 中更新编号的 div post-sort？

Question

我有八个包含各种信息的 div。我在顶部有几个按钮，可以很好地对八个 div 进行排序。工作得很好。但是，在我的八个 div 中有一个空白

和 class“.rank”，我想在 div 排序后对它们的顺序进行编号。这就是我所在的地方...

我的html结构：

<div class="item">
    <h2 class="name">Joe Blow</h2>
    <p class="rank"></p>
</div>

我的 js：

$('#sorts').on('click', 'button', function () {

    var sortByValue = $(this).attr('data-sort-by');

    $container.isotope({
        sortBy: sortByValue
    }); 

    // get Isotope instance, if using jQuery
    var iso = $container.data('isotope');

    // count how many
    console.log('filtered ' + iso.filteredItems.length + ' items'); 

    for (i=0;i<iso.filteredItems.length;i++){
        console.log(iso.filteredItems[i].element);
        //Insert i into <p> tag with class rank?
    }

});

谢谢。

编辑：Added a fiddle

Answer 1

循环中的代码是这样的：

iso.filteredItems[i].element.getElementsByClassName('rank')[0].innerHTML = (i+1).toString();

这里是 jsfiddle 新代码。

如何在 Isotope 中更新编号的 div post-sort？

How do I update numbered divs post-sort in Isotope?

javascript

jquery

sorting

jquery-isotope