如何根据数组值对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

这假设您正在循环并在您的 div 中创建多个三组，并且不需要您编辑 HTML。

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

var $part = parts.find('.part');

var groupNum = 0;
$part.each(function(k,v) {
  if (k === 0 || k % 3 === 0) {
    var $div = $(v).wrap('<div class="group" data-group="' + groupNum + '"></div>');
    $(v).attr('data-group', groupNum);
    var $second = $($part.get(k+1)).attr('data-group', groupNum);
    var $third = $($part.get(k+2)).attr('data-group', groupNum);
    $second.remove();
    $third.remove();
    $div.append($second);
    $div.append($third);
    groupNum++;
  }  
});

for (var i = 0; i < groupNum; i++) {
  var $group = $('.group[data-group="' + i + '"]');
  for (var j = 0; j < partsArray.length; j++) {
    var $thePart = $group.find('.' + partsArray[j]);  
    $thePart.remove();
    $group.append($thePart);
  }
}

$('.group').unwrap();

JSBin

Answer 2

你可以把目标索引放在元素上，把它们放在一个数组中，在索引上对数组进行排序，然后根据数组重新排列元素：

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