Javascript JQuery，使用数据属性对tile数组进行排序

给定产品槽磁贴的登录页，我的目标是根据优先级值对这些磁贴重新排序。 我使用以下调用返回具有缝纫类和显示类的瓷砖阵列：

$(".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>

编辑：为了明确目标，此排序将在document.ready中执行一次。我已经实现了第一篇帖子回复中的第二个解决方案，但是由于某些原因，没有显示类的tile显示并排序到顶部。

试试看

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.缝纫.tile-wrap.parent， t=0， 数据=$.mapelems，函数值，键{ var j=$value.dataprioritysort； t=j>t？j:t； 返回j }, n=新阵列t+1， ret=$.mapn，函数值，键{ var d=$.inArraykey，数据； 返回d！=-1？元素[d]。outerHTML:null }; $button.onclick，函数{ elems.replaceWithfunction i，el{ 返回ret[i] } } 点击 十一,

五,

七,

三,

八,

九,

一,

十,

四,

六,

十二,

二,

---

您只是希望数组被排序，还是希望DOM元素也被排序？下面的JSFIDLE有用吗？DOM元素。目标是使平铺按数据属性设置的优先级顺序显示。该页面有96个分为4行的分幅。通过单击“缝纫类别”按钮，可调用已过滤瓷砖的显示。如果某个项目售罄，show类将被删除。为了提高较差表演者的可视性，为磁贴指定了一个较低的数字，以便将其移向左上角。这在过去是通过生产团队编辑语义标记实现的。我更喜欢操纵DOM.BTW，谢谢你花时间来设置提琴。这有点帮助，但我还不能用你的例子来解决这个问题。不客气。不知道为什么你不能解决你的问题，StackOverflow充满了这种“怎么做我做这件事”类型的问题。检查这把小提琴：还有这些答案：我的困难是在一个紧迫的期限内，没有足够的理解来迅速将我的思想围绕在这个问题上。我已经仔细考虑了您之前的示例和其他一些示例，并开始掌握如何在我的页面中实现这一点。Stack overflow是一个令人惊奇的资源，里面有很多慷慨的人。非常感谢您分享您的时间和知识。这是一个快速、简洁的解决方案，但是，删除show类并不会隐藏这些互动程序。相反，它会让他们保持原来的位置，并对周围的一切进行排序。我没在想。我必须先用类tile wrap隐藏所有的tile。所以问题解决了。谢谢大家!$button.onclick，函数{$.tile-wrap.parent.hide；elems.replaceWithfunction i，el{return ret[i]}在测试这段代码之后，我发现了一些问题。我的鼻涕虫图标在游戏结束后消失sort@TomYoung不确定slug图标是哪些元素？如果可能，可以创建stacksnippet/jsfiddle吗？谢谢