排序子格屬性

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');