排序子格属性

Question

试图孩子DIV基于数据进行排序属性

下面正在被CM生成的HTML代码和数据可以在任何随机顺序进行检索。

的HTML代码是

<section class="box explore"> 
<div id="ProductContainer" class="row"> 
     <div id="1232132" data-name="B" data-category="Category_A" class="explore-cell"> 
     <h>B</h> 
     <p>Category_A</p> 
     </div> 
    <div id="123" data-name="A" data-category="Category_A" class="explore-cell"> 
     <h>A</h> 
     <p>Category_A</p> 
    </div> 
    <div id="1232152351" data-name="C" data-category="Category_A" class="explore-cell"> 
     <h>C</h> 
     <p>Category_A</p> 
    </div> 
    <div id="12342341" data-name="E" data-category="Category_B" class="explore-cell"> 
     <h>E</h> 
     <p>Category_B</p> 
    </div> 
    <div id="1325321" data-name="D" data-category="Category_B" class="explore-cell"> 
     <h>D</h> 
     <p>Category_B</p> 
    </div> 

</div> 

的java

$('div').sort(function (a, b) { 

    var contentA = $(a).attr('data-name'); 
    var contentB = $(b).attr('data-name'); 
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; 

}）

的jsfiddle http://jsfiddle.net/w8gkshue/

如果有人Ç点右边的我直接指出如何按产品名称或类别进行最佳排序。

更新希望可以得到较好的explination

Answer 1

可以使用的.sort方法这样

var $wrapper = $('#ProductContainer'); 

$wrapper.find('.explore-cell').sort(function (a, b) { 
    return a.getAttribute('data-name') > b.getAttribute('data-name'); 
}) 
.appendTo($wrapper); 

，但我不知道有关跨浏览支持

Answer 2

编辑：我错过了jQuery标签...仍然保留答案。

var productCt = document.getElementById('ProductContainer'), 
 
    reInsertProductCt = tempRemove(productCt); 
 

 

 
[].slice.call(productCt.children) 
 
    .sort(function (a, b) { 
 
    var aName = a.dataset.name, 
 
     bName = b.dataset.name; 
 
    
 
    return aName < bName? -1 : +(aName > bName); 
 
    }) 
 
    .forEach(productCt.appendChild.bind(productCt)); 
 

 
reInsertProductCt(); 
 

 

 

 

 

 
function tempRemove(el) { 
 
    var parent = el.parentNode, 
 
     nextSibling = el.nextSibling; 
 
    
 
    parent.removeChild(el); 
 
    
 
    return function() { 
 
     if (nextSibling) parent.insertBefore(el, nextSibling); 
 
     else parent.appendChild(el); 
 
    }; 
 
}

<div id="ProductContainer" class="row"> 
 
     <div id="1232132" data-name="B" data-category="Category_A" class="explore-cell"> 
 
     <h>TEST NAME B</h> 
 
     <p>TEST</p> 
 
     </div> 
 
    <div id="123" data-name="A" data-category="Category_A" class="explore-cell"> 
 
     <h>TEST NAME A</h> 
 
     <p>TEST</p> 
 
    </div> 
 
    <div id="1232152351" data-name="C" data-category="Category_A" class="explore-cell"> 
 
     <h>TEST NAME C</h> 
 
     <p>TEST</p> 
 
    </div> 
 
    <div id="12342341" data-name="E" data-category="Category_B" class="explore-cell"> 
 
     <h>TEST NAME E</h> 
 
     <p>TEST</p> 
 
    </div> 
 
    <div id="1325321" data-name="D" data-category="Category_B" class="explore-cell"> 
 
     <h>TEST NAME D</h> 
 
     <p>TEST</p> 
 
    </div> 
 

 
</div>

Answer 3

仅调用排序它们实际上不会在视觉上改变DOM，它只是返回一个有序集合。所以基本上你只需要获得收集，排序，然后返回。像这样的东西应该工作：

$('#ProductContainer > div').detach().sort(function (a, b) { 
    var contentA = $(a).data('name'); 
    var contentB = $(b).data('name'); 
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0; 
}).appendTo('#ProductContainer'); 

你要确保你使用detach（）方法，而不是remove（）方法，如分离（）将保留所有与收集相关的数据和事件项目。

Answer 4

为什么选择按类别或按名称进行排序？

我试图编写一个通用的multisort函数发生器，它也应该与本机数组排序功能一起工作。

JSFIDDLE HERE

生成该multisort一个函数，它有两个参数。

1. 列优先级列表顺序（首先按类别或按名称？您决定）。
2. 我也想为列提供值的方法（因为你可能不会以相同的方式为每个列检索它们），它是一个对象，它为每列描述一个检索数据的函数。

这

function getMultisortFn(columns, provideColumnData) { 
    return function (a, b) { 
     for (var i = 0, l = columns.length; i < l; i++) { 
      var column = columns[i]; 
      var aColumnData = provideColumnData[column.name](a, column.name); 
      var bColumnData = provideColumnData[column.name](b, column.name); 
      if (aColumnData !== bColumnData) { 
       if (column.asc) { 
        return String.prototype.localeCompare.call(aColumnData, bColumnData); 
       } 

       return String.prototype.localeCompare.call(bColumnData, aColumnData);  
      } 
     } 
    }; 
} 

现在，这是你实际使用的multisort产生

function retrieveDataAttribute(item, attribute) { 
    return $(item).data(attribute); 
} 

var $container = $('#ProductContainer'); 
var $products = $container.find('div'); 

var multisort = getMultisortFn([{ 
     name: 'category', 
     asc: false 
    }, { 
     name: 'name', 
     asc: true 
    }], { 
     name: retrieveDataAttribute, 
     category: retrieveDataAttribute 
    }); 



$products.sort(multisort); 

最后的DOM操作应用新秩序

$products.detach().appendTo($container); 

部分

编辑感谢plalx：

$container.detach().append($products).appendTo('section.box.explore');