CODEWITHSUNDEEP
javascriptjquerysortingjquery-isotope
Layne
Layne

Reputation: 672

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

I have eight divs containing various info. I have a few buttons at the top that sort the eight divs just fine. Working great. However, in my eight divs is a blank

with class ".rank" and I want to number the order of the divs after they've been sorted. Here's where I'm at...

My html structure:

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

My 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?
    }

});

Thank you.

EDIT: Added a fiddle

Upvotes: 0

Views: 65

Answers (1)

Tovly Deutsch
Tovly Deutsch

Reputation: 663

The code that would go in your loop is this:

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

Here is a jsfiddle with the new code.

Upvotes: 1

Related Questions