當運行時屬性發生變化時，jQuery Isotope排序停止工作

Question

我想用'數字'屬性對某些元素進行排序，如jQuery同位素插件演示中所示。如預期的那樣，分類工作。但是，當我在運行時更改排序字段的值時，它會停止排序。 HTML：

<div id="container" class="clearfix"> 
    <div class="element transition metal " data-symbol="Hg" data-category="transition"> 
     <p class="number">80</p> 
     <h3 class="symbol">Hg</h3> 

     <h2 class="name">Mercury</h2> 

     <p class="weight">200.59</p> 
    </div> 
    <div class="element metalloid " data-symbol="Te" data-category="metalloid"> 
     <p class="number">52</p> 
     <h3 class="symbol">Te</h3> 

     <h2 class="name">Tellurium</h2> 

     <p class="weight">127.6</p> 
    </div> 
    <div class="element transition metal " data-symbol="Cd" data-category="transition"> 
     <p class="number">48</p> 
     <h3 class="symbol">Cd</h3> 

     <h2 class="name">Cadmium</h2> 

     <p class="weight">112.411</p> 
    </div> 
    <div class="element alkaline-earth metal " data-symbol="Ca" data-category="alkaline-earth"> 
     <p class="number">20</p> 
     <h3 class="symbol">Ca</h3> 

     <h2 class="name">Calcium</h2> 

     <p class="weight">40.078</p> 
    </div> 
</div> 
<a href="javascript:void(0)" id="changeLink">Change Number</a> 

<a href="javascript:void(0)" id="sortLink">Sort</a> 

的jQuery：

$(function() { 
    var $container = $('#container'); 

    $container.isotope({ 
     itemSelector: '.element', 
     getSortData: { 
      number: function ($elem) { 
       return parseInt($elem.find('.number').text(), 10); 
      }, 

     } 
    }); 

    $('#sortLink').click(function() { 
     $('#container').isotope({ 
      sortBy: 'number', 
      sortAscending: true 
     }); 
    }); 


    $('#changeLink').click(function() { 
     $('.element').each(function() { 
      $(this).children().first().text(Math.floor(Math.random() * (100 - 1) + 1)); 
     }); 

    }); 

}); 

參見：http://jsfiddle.net/gentrobot/9q29vzbf/

Answer 1

你只需要你改變後的數字運行$container.isotope('updateSortData');。

參見：http://jsfiddle.net/alan0xd7/9q29vzbf/2/

注：我注意到，您使用的同位素的過時的版本，所以我已經將它更新到最新版本。

Answer 2

清除容器並加入更新值到它，然後在其上施加reloadItems。

$('#changeLink').click(function() { 
     $('.element').each(function() { 
      $(this).children().first().text(Math.floor(Math.random() * (100 - 1) + 1)); 
     }); 
     var newitems = $('#container').html(); 
     $('#container').html(''); 
     $('#container').html(newitems) 
    .isotope('reloadItems').isotope({ sortBy: 'number' }); 


    }); 

Demo