Question

我有以下DOM结构，我想根据data-created属性进行排序。

<a id="comment-34" href="#"/>
<li data-created="12342342" />

<a id="comment-35" href="#"/>
<li data-created="89342342" />

<a id="comment-36" href="#"/> 
<li data-created="45363342" />

我 CAN NOT （由于各种原因）将<a>和<li>包裹在外<div>中。我想做javascript排序。如果我只有<li>，所有jQuery排序插件都可以进行排序。例如。使用tinysort jQuery插件（http://tinysort.sjeiti.com/）我可以做

$('li').tsort({order:'desc', attr:'data-created'});

然而，排序后发生的事情是<a>不再与其原始兄弟姐妹相关联。我还评估了https://github.com/jamespadolsey/jQuery-Plugins/tree/master/sortElements/但它也可能遇到同样的问题。

有什么办法吗？同样，我无法将<a>和<li>包裹在外部<div>中。我也不想动态包装<div>以便我可以使用tsort。

任何干净的解决方案:-)？

Answer 1

首先，您不能将<li>和<a>元素作为兄弟姐妹。列表项必须位于列表（<ol>，<ul>）内，其中不允许使用其他元素。

忽略这一点，你可以简单地抓住每一对，从DOM中删除，重新排序，然后将它们放回去。这很直截了当。例如：

var items = [];
$('#sortme a').each(function(){

  // grab the element and its next sibling
  var self = $(this)
    , next = self.next('div');

  items.push([
    self.remove().get(0),
    next.remove().get(0)
  ]);
});

items.sort(function(a,b){
  return a[1].getAttribute('data-created') > b[1].getAttribute('data-created');
});

$.each(items, function(){
  $('#sortme').append(this[0], this[1]);
});

在此测试：http://jsbin.com/okajo4/edit

编辑：更简单的版本：）

var sorted = $('#sortme');

sorted.find('div')
  .sort(function(a,b){
    return $(a).data('created') > $(b).data('created');
  })
  .each(function(){
    $(this).prev('a').andSelf().appendTo(sorted);
  });

Answer 2

这样的事情对你有用：

var elms = [];
$('a').each(function() { //create the array of a and li
    var pair = {
        aTag: $(this),
        liTag: $(this).next("li")
    };
    elms.push(pair);
});
$("a, li").detach(); //detach them from the dom
elms.sort(function(a, b) {
    return a.liTag.data("created") < b.liTag.data("created"); //sort based upon the created data
});

$.each(elms , function(){
    $("ul").append(this.aTag).append(this.liTag); //push them back to the dom.
});

jsfiddle上的代码示例。

Answer 3

将a元素移动到各自的列表项中。然后你应该能够使用你提到的那种。

即使将这些元素作为兄弟姐妹是有效的，它仍然会让我感觉不好。

在DOM中使用相邻元素进行排序

3 个答案: