如何在Isotope中更新后排序的编号div？

Question

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

与课程＆＃34; .rank＆＃34;并且我想在它们被排序后对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