मैं माता-पिता divs को उनके ग्रंथों के अनुसार पुनर्व्यवस्थित करना चाहता हूं। यहाँ मेरे कोड हैं:

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

क्रमबद्ध सरणी के अनुसार मैं अपने divs (# planner-itinWidget-itinsAccord-0, #planner-itinWidget-itinsAccord-1, #planner-itinWidget-itinsAccord-2, #planner-itinWidget-itinsAccord-3) को कैसे ऑर्डर कर सकता हूं।

1
alicant 5 नवम्बर 2017, 00:26

2 जवाब

सबसे बढ़िया उत्तर

छँटाई करने से पहले, प्रत्येक पाठ को div तत्व के साथ जोड़ दें (एक उप सरणी में), और फिर ग्रंथों के आधार पर उन युग्मों की सरणी को क्रमबद्ध करें। इस तरह div एलीमेंट रेफरेंस को भी उसी समय सॉर्ट किया जाएगा।

फिर उन तत्वों को आपके पास क्रमबद्ध क्रम में एक के बाद एक जोड़ दें। यह वास्तव में उन तत्वों को स्थानांतरित करेगा।

ध्यान दें: मैंने #ucret को .ucret से बदल दिया है, क्योंकि HTML डुप्लिकेट id विशेषता मानों की अनुमति नहीं देता है। तो id="ucret" के बजाय class="ucret" का उपयोग करने के लिए अपना HTML बदलें।

$('#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>
0
trincot 5 नवम्बर 2017, 00:54

JQuery कस्टम सॉर्टिंग फ़ंक्शन का उपयोग करें।

सभी संबंधित div जैसे planner-itinWidget-itinsAccord के लिए एक सामान्य वर्ग सेट करें, फिर:

$('.planner-itinWidget-itinsAccord').sort(function (el1, el2) {
    return $(el1).text() > $(el2).text();
}
0
spirit 5 नवम्बर 2017, 00:37