jQuery 当属性在运行时更改时，同位素排序停止工作

Question

我正在尝试使用 'number' 属性对某些元素进行排序，如 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

清除容器并向其添加更新值，然后对其应用 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

Answer 2

您只需运行 $container.isotope('updateSortData'); 更改号码后即可。

参见：http://jsfiddle.net/alan0xd7/9q29vzbf/2/

注意：我注意到您使用的 Isotope 版本已过时，因此我已将其更新为最新版本。

jQuery 当属性在运行时更改时，同位素排序停止工作

jQuery Isotope sorting stops to work when attribute changed on runtime

jquery

jquery-isotope