javascript - 按自定义排序顺序在 jQuery 中对 Div 进行排序

Question

我正在尝试通过比较来重新排序标签 input 的子元素他们的类别属性到 Javascript 中的类别顺序变量 category_sort_order。然后我需要删除其类别属性的div不会出现在 category_sort_order 中。

预期的结果应该是:

any
product1
product2
download

代码:

<div id="input">
<div category="download">download</div>
<div category="video">video1</div>
<div category="video">video2</div>
<div category="product">product1</div>
<div category="any">any</div>
<div category="product">product2</div>
</div>

<script type="text/javascript">
var category_sort_order = ['any', 'product', 'download'];
</script>

我真的不知道从哪里开始这项任务，但如果您能提供任何帮助，我将不胜感激。

Answer 1

我写了一个 jQuery 插件来做这种可以很容易地适应您的用例的事情。

The original plugin is here

这里是你的问题的改造

(function($) {

$.fn.reOrder = function(array) {
  return this.each(function() {

    if (array) {    
      for(var i=0; i < array.length; i++) 
        array[i] = $('div[category="' + array[i] + '"]');

      $(this).empty();  

      for(var i=0; i < array.length; i++)
        $(this).append(array[i]);      
    }
  });    
}
})(jQuery);

然后像这样使用

var category_sort_order = ['any', 'product', 'download'];
$('#input').reOrder(category_sort_order);

这一次恰好获得了正确的产品顺序，因为 product1 在原始列表中出现在 product2 之前，但它可以很容易地更改为先对类别进行排序，然后再放入数组并附加到 DOM。此外，如果将它用于多个元素，则可以通过一次将所有元素附加到数组中而不是遍历数组并一次附加一个元素来改进它。这可能是一个很好的案例 DocumentFragments .