Question

我想根据他们的文本重新排列父div。这是我的代码：

$('#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-itinsAccord-1，＃planner-itinWidget-itinsAccord-2，＃planner-itinWidget-itinsAccord-3）

Answer 1

使用jQuery自定义排序功能。

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

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

Answer 2

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

然后按照您的排序顺序依次追加这些元素。这实际上将移动这些元素到位。

注意：我已将#ucret替换为.ucret，因为HTML不允许重复的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;
        });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery按照文本排序div

2 个答案: