Question

我只是想知道如何通过asc命令jquery数组对象是DOM元素？我想按类名“TicketValue”重新排序dom，其值为1000,500和200等.dom元素如下所示。

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

我希望dom元素如下面的顺序。值200将位于顶部，1000将在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

Answer 1

可以做这样的事情

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

＆＃13;

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

＆＃13;

span {
    display:inline-block!important;
    margin-right:10px
}
a {
    display:block
}

＆＃13;

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

＆＃13;

Answer 2

几年前，我遇到了James Padolsey的这段代码片段。关于它的好处是它的级别很低，所以你可以创建自己的排序规则并对你想要的任何元素进行排序。

查看他的文章，这是非常好的解释，它有几个例子：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;
});

如何重新排序dom元素

2 个答案: