Question

鉴于产品插槽图块的目标网页，我的目标是根据优先级值重新排序这些图块我正在使用以下调用返回一个带有缝纫类和show class的瓷砖数组：

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

现在我想对这个返回的数组进行排序，按照每个tile的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上实现一次。我已经实现了在我的第一篇文章的回复中找到的第二个解决方案，但出于某种原因，没有展示类的瓷砖显示并排序到顶部。

Answer 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>

JQuery，使用data属性排序tile数组

1 个答案: