javascript - JQuery, sort array of tiles using data attribute -
given landing page of product slot tiles, goal reorder these tiles based on priority value.
i'm using following call return array of tiles sewing class , show class:
$(".show.sewing.tile-wrap").parent(); now sort returned array, ordered values found in each tile's data-prioritysort attribute.
here typical html product slot tile:
<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: clarify goal, sort implemented once @ document.ready. i've implemented second solution found in replies first post reason tiles without show class display , sort top.
try
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 `t` , n = new array(t + 1) // return `html` of elements having `data-prioritysort` value // least greatest , ret = $.map(n, function (value, key) { // `d` : index of item within `data` @ `key` less `t` var d = $.inarray(key, data); // return `html` of item within `data` @ `key` index return d !== -1 ? elems[d].outerhtml : null }); // replace `elems` `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>
Comments
Post a Comment