CODEWITHSUNDEEP
jqueryhtml
luke
luke

Reputation: 95

How to reorder dom elements

I am just wondering about how to order the jquery array object which is DOM elements by asc ? I would like to reorder the dom by the class name "TicketValue" whoes values are 1000, 500 and 200 etc. The dom elements are as below.

 <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 would like the dom elements as in the order below. The value 200 will come on top and 1000 will be lowest in the dom.

 <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

Upvotes: 0

Views: 6225

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Can do something like 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();
    return aVal > bVal;
  });

  $container.html($tickets);
});


$(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();
    return aVal > bVal;
  });

  $container.html($tickets);
});
span {
    display:inline-block!important;
    margin-right:10px
}
a {
    display:block
}
<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>

Upvotes: 5

victmo
victmo

Reputation: 1216

A few years ago I came across this code snippet by James Padolsey. The nice thing about it is that it's very low level so you can create your own sorting rules and sort any element you want.

Check out his article, it's very well explained and it has a few examples: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('a.draw-ticket-wrap').sortElements(function(a, b){
    return parseInt($(a).find('.TicketValue').text()) > parseInt($(b).find('.TicketValue').text()) ? 1 : -1;
});

Upvotes: 2

Related Questions