追加后的JQuery同位素排序

Question

我试过了

$("#add").click(function(){
    var $newIems = $("<div class='post-body post item'>itemName</div>")
    $(".items").isotope("append", $newIems, true);
});

$("#sort").click(function(){
    $('.items').isotope({
        getSortData : {
            content: function ( $elem ) {
                return $elem.find('.post-content').text();
            }
        }
    });
    $('.items').isotope({ sortBy : 'date' });
    $('.items').isotope( 'reLayout' )

});

但项目不会得到排序。一般来说，是否可以向同位素容器中添加新项目并对其进行分类？我想做的只是将新项目附加到我的 straightDown 同位素列表的顶部。

更新1：
该项目已使用 prepend() 附加在顶部。
我的前置代码等于 Hady 的（这个问题下面的答案第二个答案）。
但它仍然附加在第二项中，因为不会设置 css 顶部值，这里是 DOM：

<div class="items isotope" style="position: relative; overflow: hidden; height: 354px;">
       <div class="item isotope-item" style="position: absolute;">addedItem</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 0px;">item1</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 81px;">item2</div>
       <div class="item isotope-item" style="position: absolute; left: 0px; top: 172px;">item3</div>
</div>

如您所见，现有项目也没有获得额外的 +top 像素。所以我想我必须在附加新项目后调用 reLayout() ？

Answer 1

我认为您想使用addItems 方法。检查documentation。还有一个demo你可以试试。

Answer 2

如果您只是在容器的开头插入新项目，那么您需要前置新创建的项目，而不是附加。 p>

$("#add").click(function(){
    var $newIems = $("<div class='post-body post item'>itemName</div>")
    $(".items").prepend($newIems).isotope('reloadItems');    
    return false;
});