jquery - How to reorder dom elements -
jquery - How to reorder dom elements -
i wondering how order jquery array object dom elements asc ? reorder dom class name "ticketvalue" whoes values 1000, 500 , 200 etc. dom elements below.
class="snippet-code-html lang-html prettyprint-override"> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">1000</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$1,000 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">500</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$500 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">200</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">50</span> <span style="display: none;" class="tickettitle">$200 order</span> </a>
i dom elements in order below. value 200 come on top , 1000 lowest in dom.
class="snippet-code-html lang-html prettyprint-override"> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">200</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$1,000 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">500</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$500 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">1000</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">50</span> <span style="display: none;" class="tickettitle">$200 order</span> </a>
cheers
can this
$(function() { var $container = $('#container'), $tickets = $('.draw-ticket-wrap').detach() $tickets = $tickets.sort(function(a, b) { var aval = 1 * $(a).find('.ticketvalue').text(), bval = 1 * $(b).find('.ticketvalue').text(); homecoming aval > bval; }); $container.html($tickets); });
class="snippet-code-js lang-js prettyprint-override">$(function() { var $container = $('#container'), $tickets = $('.draw-ticket-wrap').detach() $tickets = $tickets.sort(function(a, b) { var aval = 1 * $(a).find('.ticketvalue').text(), bval = 1 * $(b).find('.ticketvalue').text(); homecoming aval > bval; }); $container.html($tickets); });
class="snippet-code-css lang-css prettyprint-override">span { display:inline-block!important; margin-right:10px } { display:block }
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">1000</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$1,000 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">500</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">125</span> <span style="display: none;" class="tickettitle">$500 order</span> </a> <a class="draw-ticket-wrap"> <span style="display: none;" class="ticketvalue">200</span> <span style="display: none;" class="ticketid">7</span> <span style="display: none;" class="tickettotalnumberoftickets">50</span> <span style="display: none;" class="tickettitle">$200 order</span> </a> </div>
jquery html
Comments
Post a Comment