JQuery，使用数据属性对瓷砖数组进行排序答案

【问题标题】：JQuery, sort array of tiles using data attributeJQuery，使用数据属性对瓷砖数组进行排序
【发布时间】：2014-11-11 16:36:25
【问题描述】：

给定一个产品槽图块的着陆页，我的目标是根据优先级值对这些图块重新排序。
我正在使用以下调用返回具有缝纫类和显示类的瓷砖数组：

$(".show.sewing.tile-wrap").parent();

现在我想对这个返回的数组进行排序，按每个图块的 data-prioritysort 属性中的值排序。
这是我典型的 HTML 产品槽图块：

<div class="c3 tile-96 border" data-prioritysort="11" >
  <div class="tile-wrap show sewing clearfix">
     <div class="slug">
         <div class="c3 tile-slug-1 "></div>
         <div class="c3 tile-slug-2 "></div>
         <div class="c3 tile-slug-3 "></div>
     </div>
    <div class="c12  proofing"></div>
    <div class="slot-cta">
        <h2><a href="TBD?icn=TBD&ici=96"
        title="25% Off Description."
        alt="25% Off Description.">
        <!-- 25% Off--></a></h2>
        <p><!-- Description.--></p>
    </div>
  </div>
</div>

edit：为了明确目标，这种排序将在 document.ready 中实现一次。我已经实现了在我的第一篇文章的回复中找到的第二个解决方案，但由于某种原因，没有显示类的图块显示并排序到顶部。

【问题讨论】：

您只是想要对数组进行排序，还是想要对 DOM 元素也进行排序？以下jsfiddle有什么用吗？ jsfiddle.net/ve7eg6pj
DOM 元素。目标是按数据属性设置的优先级顺序显示图块。该页面有 96 个磁贴，这些磁贴分成 4 行。通过单击缝纫类别按钮来调用过滤后的图块的显示。如果一件商品售罄，则移除展示类。为了提高表现不佳者的可见度，磁贴被赋予较低的数字以将其移至左上角。这在过去是通过生产团队编辑语义标记来实现的。我更喜欢操纵 DOM。
顺便说一句，感谢您花时间设置小提琴。这有点帮助，但我还不能用你的例子解决这个问题。
不客气。不知道为什么你不能解决你的问题，StackOverflow 充满了这类“如何做我做这件事”类型的问题。检查这个小提琴：jsfiddle.net/j248k6z9 以及这些答案：stackoverflow.com/search?q=jquery+sort+by+attribute
我的困难在于时间紧迫，并且没有足够的理解来快速解决这个问题。我一直在考虑您之前的示例和其他一些示例，并且开始掌握如何在我的页面中实现它。堆栈溢出是一个充满慷慨的人的惊人资源。衷心感谢您分享您的时间和知识。

标签： javascript jquery arrays sorting

【解决方案1】：

试试

var elems = $(".show.sewing.tile-wrap").parent()
, t = 0
, data = $.map(elems, function (value, key) {
    var j = $(value).data("prioritysort");
    // `t` : greatest `data-prioritysort` value
    t = j > t ? j : t;
    return j
})
// create array having `length` 1 greater than `t`
, n = new Array(t + 1)
// return `html` of elements having `data-prioritysort` value
// from least to greatest
, ret = $.map(n, function (value, key) {
    // `d` : index of item within `data` at `key` less than `t`
    var d = $.inArray(key, data);
    // return `html` of item within `data` at `key` index
    return d !== -1 ? elems[d].outerHTML : null
});
// replace `elems` with `ret`
elems.replaceWith(function (i, el) {
    return ret[i]
});

var elems = $(".show.sewing.tile-wrap").parent(),
    t = 0,
    data = $.map(elems, function (value, key) {
        var j = $(value).data("prioritysort");
        t = j > t ? j : t;
        return j
    }),
    n = new Array(t + 1),
    ret = $.map(n, function (value, key) {
        var d = $.inArray(key, data);
        return d !== -1 ? elems[d].outerHTML : null
    });
$("button").on("click", function () {
    elems.replaceWith(function (i, el) {
    return ret[i]
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>click</button>
<div class="c3 tile-96 border" data-prioritysort="11">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->11</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="5">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->5</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="7">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->7</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="3">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->3</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="8">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->8</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="9">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->9</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="1">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->1</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="10">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->10</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="4">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->4</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="6">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->6</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="12">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->12</p>
        </div>
    </div>
</div>
<div class="c3 tile-96 border" data-prioritysort="2">
    <div class="tile-wrap show sewing clearfix">
        <div class="slug">
            <div class="c3 tile-slug-1 "></div>
            <div class="c3 tile-slug-2 "></div>
            <div class="c3 tile-slug-3 "></div>
        </div>
        <div class="c12  proofing"></div>
        <div class="slot-cta">
             <h2><a href="TBD?icn=TBD&ici=96"
            title="25% Off Description."
            alt="25% Off Description.">
            <!-- 25% Off--></a></h2>

            <p>
                <!-- Description.-->2</p>
        </div>
    </div>
</div>

【讨论】：

这是一个快速、简洁的解决方案，但是，删除“show”类并不会隐藏这些图块。而是将它们留在原来的位置，并对它们周围的所有其他内容进行排序。
我没想到。我必须首先隐藏所有具有“tile-wrap”类的图块。所以问题就解决了。谢谢！
$("button").on("click", function () { $(".tile-wrap").parent().hide(); elems.replaceWith(function (i , el) { return ret[i] }) })
测试此代码后，我发现了一些问题。我的蛞蝓图标在排序后消失了
@TomYoung 不确定“slug 图标”是哪些元素？如果可能的话，可以创建stacksn-p/jsfiddle吗？谢谢