根据文本对div进行Jquery排序

Question

我想根据家长的文字重新排列。这是我的密码：

$('#duration').click(function() {
var  u1 = $('#planner-itinWidget-itinsAccord-0 div .otp-itinTripSummary #ucret').text();
var u2 = $('#planner-itinWidget-itinsAccord-1 div .otp-itinTripSummary #ucret').text();
var u3 = $('#planner-itinWidget-itinsAccord-2 div .otp-itinTripSummary #ucret').text();
var u4 = $('#planner-itinWidget-itinsAccord-3 div .otp-itinTripSummary #ucret').text();
var arrayUcret = [u1,u2,u3,u4];
arrayUcret.sort();
  });

如何根据排序数组订购我的div(#planner-itinWidget-itinsAccord 0，#planner-itinWidget-I 1，#planner-itinWidget-itinsAccord 2，#planner-itinWidget-I 3)。

Answer 1

排序之前，将每个文本与它所属的div元素配对(在子数组中)，然后根据文本对这些对的数组进行排序。这样，div元素引用也将同时排序。

然后按照您所拥有的排序顺序，一个接一个地追加这些元素。这实际上会将这些元素移到适当的位置。

注意:我已经用#ucret代替了.ucret，因为.ucret不允许重复的id属性值。因此，将HTML更改为使用class="ucret"而不是id="ucret"。

$('#duration').click(function() {
    var u1 = $('#planner-itinWidget-itinsAccord-0 div .otp-itinTripSummary .ucret').text();
    var u2 = $('#planner-itinWidget-itinsAccord-1 div .otp-itinTripSummary .ucret').text();
    var u3 = $('#planner-itinWidget-itinsAccord-2 div .otp-itinTripSummary .ucret').text();
    var u4 = $('#planner-itinWidget-itinsAccord-3 div .otp-itinTripSummary .ucret').text();
    [u1, u2, u3, u4]
        // Pair the DIV element with each text
        .map( (u, i) => [u, $('#planner-itinWidget-itinsAccord-' + i)] )
        // Sort by the text part    
        .sort( (a,b) => a[0].localeCompare(b[0]) )
        // Move each element relative to the previous one in the sort order
        .reduce( (a, b) => {
            a[1].after(b[1]);
            return b;
        });
});

​

$('#duration').click(function() {
    var u1 = $('#planner-itinWidget-itinsAccord-0 div .otp-itinTripSummary .ucret').text();
    var u2 = $('#planner-itinWidget-itinsAccord-1 div .otp-itinTripSummary .ucret').text();
    var u3 = $('#planner-itinWidget-itinsAccord-2 div .otp-itinTripSummary .ucret').text();
    var u4 = $('#planner-itinWidget-itinsAccord-3 div .otp-itinTripSummary .ucret').text();
    [u1, u2, u3, u4]
        // Pair the DIV element with each text
        .map( (u, i) => [u, $('#planner-itinWidget-itinsAccord-' + i)] )
        // Sort by the text part    
        .sort( (a,b) => a[0].localeCompare(b[0]) )
        // Move each element relative to the previous one in the sort order
        .reduce( (a, b) => {
            a[1].after(b[1]);
            return b;
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="duration">Sort</button>
<div id="planner-itinWidget-itinsAccord-0" class="planner-itinWidget-itinsAccord">
    <div>
        <div class="otp-itinTripSummary">
            <div class="ucret">hello</div>
        </div>
    </div>
</div>
<div id="planner-itinWidget-itinsAccord-1" class="planner-itinWidget-itinsAccord">
    <div>
        <div class="otp-itinTripSummary">
            <div class="ucret">word</div>
        </div>
    </div>
</div>
<div id="planner-itinWidget-itinsAccord-2" class="planner-itinWidget-itinsAccord">
    <div>
        <div class="otp-itinTripSummary">
            <div class="ucret">foo</div>
        </div>
    </div>
</div>
<div id="planner-itinWidget-itinsAccord-3" class="planner-itinWidget-itinsAccord">
    <div>
        <div class="otp-itinTripSummary">
            <div class="ucret">bar</div>
        </div>
    </div>
</div>

​

Answer 2

使用jQuery自定义排序功能。

然后为所有相关的div (如planner-itinWidget-itinsAccord，)设置一个公共类：

$('.planner-itinWidget-itinsAccord').sort(function (el1, el2) {
    return $(el1).text() > $(el2).text();
}