javascript - 对同位素中的动态元素进行排序

Question

我正在使用 jQuery 的 $.each 循环和在 Google Sheets (Tabletop.js) 中创建的 JSON 文件构建船舶列表，并尝试使用 Isotope.js 对它们进行排序。

jQuery 创建列表没有任何问题。但是，当我单击按钮通过同位素对元素进行排序时，没有任何反应。

当我将元素硬编码到 HTML 页面中时，Isotope 可以毫无问题地对所有内容进行排序。

我查遍了互联网，但找不到答案。

带有对另一个函数的回调的循环，该函数从电子表格中获取我的数据。 #port 是我的 HTML 中的一个 div，一切都在其中进行。

这是我正在使用的代码。

function showInfo(data, tabletop) {

    var shipData = tabletop.sheets('data').all();

    var items=[];

    $.each(shipData, function(i) {

        //Put each ship in the port ^__-
        var ship = "<div class=\"ship\"><div class=\"row\"><p class=\"name font-lg\">" + shipData[i].name + "</p><p class=\"cruise-line font-xs\">" + shipData[i].line +"</p><div class=\"ship-photo col-md-9 col-sm-9\"><img src=\"img/" + shipData[i].img + "\" class=\"img-responsive\"></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-4 col-xs-4\">Launched</div><div class=\"header font-xs col-sm-4 col-xs-4\">Length</div><div class=\"header font-xs col-sm-4 col-xs-4\">Tonnage</div></div><div class=\"row\"><div class=\"year font-lg col-sm-4 col-xs-4\">" + shipData[i].launchYear +"</div><div class=\"length font-lg col-sm-4 col-xs-4\">" + shipData[i].length + "'</div><div class=\"weight font-lg col-sm-4 col-xs-4\">" + shipData[i].tonnage + "</div></div></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-6 col-xs-6\">Max capacity</div><div class=\"header font-xs col-sm-6 col-xs-6\">Crew</div></div><div class=\"row\"><div class=\"max-passenger font-lg col-sm-6 col-xs-6\">" + shipData[i].maxCapacity + "</div><div class=\"crew font-lg col-sm-6 col-xs-6\">" + shipData[i].crewCapacity + "</div></div></div></div>";

            items.push(ship);

      });

    $port.append(items)
}

这是我的同位素排序代码:

// init Isotope
    $('#port').isotope({
        itemSelector: ".ship",
        layoutMode: 'vertical',
        getSortData: {
            name: '.ship'
        }
    })

// bind sort button click
$('#sorts').on( 'click', 'button', function() {
     var $this = $(this);
     var sortValue = $this.attr('data-sort-value');

     $('#port').isotope({ 
            sortBy: sortValue 
     });

  });

这是我的 HTML:

<div class="compare">
    <h3>How the ships compare</h3>
    <div id="sorts" class="button-group">
                <button class="button" data-sort-value="name">name</button>
                <button class="button" data-sort-value="length">length</button>
                <button class="button" data-sort-value="weight">weight</button>
                <button class="button" data-sort-value="passengers">passenger</button>
                <button class="button" data-sort-value="original-order">clear</button>      
            </div>
        </div>

<div id="port"></div>

JSFiddle demo 。一个列表是用 JS 生成的，另一个列表是用 HTML 生成的。

Answer 1

有两个问题需要解决。

将 #sorts 更改为:

<button id="sort"  data-sort-value="name">Click to sort</button>

您的数据函数如下:

$.each(data, function (i) {
$('.port').append("<li><div class='name'>" + data[i] + "</div></li>");
});