javascript - 如何根据数组值对html元素进行排序

Question

我正在尝试根据输入的数据属性中的项目顺序使用 jQuery 对 html 元素进行排序。 “数据顺序”

请参阅此处的代码设置，但我卡住了。

http://jsbin.com/cixolonoqe/1/edit?html,js,output

HTML:

<div id="control">
   <input type="hidden" data-order="title,text,date">
  </div>
  <div id="parts">

    <p class="date part">20 January 2014</p>
    <h5 class="title part">Some Title</h5>
    <p class="text part">A line of Text</p>

  </div>

jQuery:

var input =  $('#control input');
var partsOrder = input.attr("data-order");

var parts = $('#parts');

parts.find('.part').each(function(i) {
      $(this).attr('data-index', 'index' + i);
});

//Make array from data-order attribute
var partsArray = partsOrder.split(',');

 $.partsArray(json, function(i, val) {


  //modify html order



 });

如果数据顺序字符串发生变化，我希望 html 相应地重新排序。

标题、文本、日期与日期、文本、标题

到目前为止，我已经在零件上添加了一个带有原始索引的新数据属性。并根据数据顺序字符串创建了一个数组，以便循环访问和修改 html。

但我无法理解它。

Answer 1

可以将目标索引放在元素上，获取到一个数组中，根据索引对数组进行排序，然后根据数组重新排列元素:

var partsOrder = $('#control input').attr("data-order").split(',');

var parts = $('#parts');

// set target index for elements
$.each(partsOrder, function(i, v){
  $('.' + v, parts).data('index', i);
});

// sort array on index
var items = parts.find('.part');
items.sort(function(a,b){ return $(a).data('index') - $(b).data('index'); });

// move elements into array order
parts.append(items);

演示:http://jsbin.com/fejegeyoco/2/edit