Javascript 基于数据属性对子div排序

尝试根据数据属性对子div进行排序

下面的html代码是由CM生成的，数据可以任意顺序检索

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>

B
A类

A.
A类

C
A类

E
B类

D
B类

爪哇

$（'div'）.sort（函数（a，b）{
var contentA=$（a）.attr（'data-name'）；
var contentB=$（b）.attr（'data-name'）；
返回值（contentAcontentB）？1:0；

})

JSFIDLE

如果有人能直接告诉我如何按产品名称或类别进行最佳排序

---

更新希望这能提供更好的解释

您可以使用。像这样的排序方法

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

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

---

但是我不确定是否支持交叉浏览编辑：我错过了jQuery标签。。。让答案保持不变

var-productCt=document.getElementById（'ProductContainer'），
重新插入productCt=临时删除（productCt）；
[].slice.call（productCt.children）
.排序（功能（a、b）{
var aName=a.dataset.name，
bName=b.dataset.name；
返回aNamebName）；
})
.forEach（productCt.appendChild.bind（productCt））；
重新插入productct（）；
函数tempRemove（el）{
var parent=el.parentNode，
nextSibling=el.nextSibling；
父母。远程儿童（el）；
返回函数（）{
if（nextSibling）parent.insertBefore（el，nextSibling）；
else父项、子项（el）；
};
}

测试名称B
试验

测试名称A
试验

测试名称C
试验

测试名称E
试验

测试名称D
试验

仅对它们调用sort实际上不会改变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');

$（'#ProductContainer>div'）.detach（）.sort（函数（a，b）{
var contentA=$（a）.data（'name'）；
var contentB=$（b）.data（'name'）；
返回值（contentAcontentB）？1:0；
}).appendTo（“#ProductContainer”）；

---

您需要确保使用detach（）方法，而不是remove（），因为detach（）将保留与集合项关联的所有数据和事件。

既然可以按类别或名称排序，为什么选择按类别或名称排序

我试图编写一个通用的多排序函数生成器，它也可以与本机数组排序函数一起使用

一个生成多重排序的函数，它有两个参数

列优先级列表顺序（首先按类别或名称？由您决定）

我还想要一种为列提供值的方法（因为对每一列检索值的方式可能不同），它是一个为每一列描述检索数据的函数的对象

给你

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

最后是应用新顺序的DOM操作

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

编辑感谢：

---

您是否正在尝试根据排序重新定位dom元素？div将生成行和单元格的网格视图，其中单元格的顺序不正确。我试图将其用作起点，但没有使用Strings。尝试使用div id而不是类的最佳方法是使用Strings。有多行类这是正确的，谢谢你的建议，我会到处玩的，我不能让它在本地工作，但这是一个好的开始，谢谢兄弟银行的例子，没有必要在附加产品之前分离

$products

。另外，它是在添加产品之前要分离的

$container

，以避免多次回流。

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

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

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