添加新 div 后排序同位素无法正常工作

Question

我已使用同位素按属性值对 div 进行排序。但是当我添加新的 div 或编辑现有 div 之一时。然后排序无法正常工作。新创建或编辑的 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 );

或使用 reloadItems 和排序参数 sortBy :

$('.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');

希望这对您有所帮助。

添加新 div 后排序同位素无法正常工作

Sort isotope is not working properly after adding new div

javascript

jquery-isotope