新しいdivを追加した後、アイソトープが正しく動作しない

Question

アイソトープを使用してdivを属性値でソートしました。しかし、私は新しいdivを追加するか、既存のdivの1つを編集します。ソートが正しく機能していない。 divのソート順が真ん中であっても、divのリストの最後に新しく作成または編集されたdivが追加されます。私のコードは以下の通りです。おかげさまで

<div class="mainContainer"> 
 
    <div class="subContainer" data-order="4"> 
 
    4 
 
    </div> 
 
    <div class="subContainer" data-order="1"> 
 
    1 
 
    </div> 
 
    <div class="subContainer" data-order="3"> 
 
    3 
 
    </div> 
 
    <div class="subContainer" data-order="2"> 
 
    2 
 
    </div> 
 
</div>

Answer 1

同位体コンテナに新しいコンテンツを追加することに同位体addItemsまたはinsertメソッドを使用してみてください：

$('.mainContainer').append($newItems).isotope('addItems', $newItems); 
$('.mainContainer').isotope('insert', $newItems); 

またはsortパラメータsortByでreloadItemsを使用します。

$('.mainContainer').isotope('reloadItems'); 
$('.mainContainer').isotope({sortBy:'original-order'}); 

ソート機能：

$('.mainContainer').find('.subContainer').sort(function(a, b) { 
    return +a.getAttribute('data-order') - +b.getAttribute('data-order');  
}).appendTo('.mainContainer'); 

この情報がお役に立てば幸いです。