Javascript 同位素中动态元素的分选

我正在使用jQuery的$.each循环和在Google Sheets（Tabletop.js）中创建的JSON文件构建一个船舶列表，并尝试使用同位素.js对其进行排序

jQuery创建的列表没有任何问题。然而，当我点击我的按钮通过同位素对元素进行排序时，什么也没发生

当我将元素硬编码到我的HTML页面中时，同位素对所有内容进行排序都没有问题

我在互联网上找遍了，找不到答案

循环，带有对另一个函数的回调，该函数从电子表格中获取数据

#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)
}

这是我的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>

这些船比较起来怎么样
名称
长度
重量
乘客
清楚的

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

有两个问题需要解决

将#排序更改为：

<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>");
});

$。每个（数据、函数（i）{
$（'.port'）。追加（“
”+数据[i]+“
”）；
});

您应该在此基础上添加一个JSFIDLE，这将大大提高您快速回答问题的机会！www.jsfiddle.netI我已经用一个jsfiddle示例更新了我的问题。成功了！您能解释一下您是如何找到这个解决方案的吗？要使排序工作，您需要为按钮设置一个数据排序值，因为您在单击函数中调用了它。当需要在具有该类的li中有一个div时，您还拥有具有类名的li元素。很高兴它起作用了。如果是正确的，请将其标记为已回答。

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