locked
How can I re-sort my div elements? RRS feed

  • Question

  • User1868852945 posted

    For the below divs representing three rows of data, the display would show...

    Alice

    Clive

    Berry

    <div class="container">
    <div class="line" id="Alice">Alice</div>
    <div class="line" id="Clive">Clive</div>
    <div class="line" id="Berry">Berry</div>
    </div>

    Can someone please recommend a way in javascript or jquery to re-sequence these according to an ascending sort?

    I want to provide a sort button on the view page that when clicked would invoke a function to re-sequence.

    Thanks for any feedback.

    Monday, November 7, 2016 7:08 PM

Answers

  • User347430248 posted

    Hi Gunderj,

    please see the example mentioned below.

    HTML Code:

    <div id="sortThis">
        <div id="1"><span class="style">Alice</span></div>
        <div id="2"><span class="style">Clive</span></div>
        <div id="3"><span class="style">Berry</span></div>
    </div>
    <button id="sStyle" class="btnSort">Sort By Style</button><br />

    JS Code:

    function sortUsingNestedText(parent, childSelector, keySelector) {
        var items = parent.children(childSelector).sort(function(a, b) {
            var vA = $(keySelector, a).text();
            var vB = $(keySelector, b).text();
            return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        });
        parent.append(items);
    }
    $('#sStyle').data("sortKey", "span.style");
    $("button.btnSort").click(function() {
       sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
    });
    
    
    

    Output:

    Live Example:

    Div Sorting JSFiddle

    Regards

    Deepak

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 12:35 AM

All replies

  • User-183374066 posted

    I have replied on your other thread.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>fsdffsdf</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <style type="text/css">
            .container > div {
                background-color: black;
                color: white;
                text-align: center;
                padding: 5px;
                margin-bottom: 5px;
            }
    
           
        </style>
        <script type="text/javascript">
            $(function () { //this is the overall function
                sort_now();
            });
    
            function sort_now() {
                $('.container').sortable();
            }
        </script>
    
    </head>
    <body>
    
        <div class="container">
            <div class="ui-state-default" id="Alice"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Alice</div>
            <div class="ui-state-default" id="Clive"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Clive</div>
            <div class="ui-state-default" id="Berry"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Berry</div>
        </div>
    
    </body>
    </html>

    See demo here 

    Monday, November 7, 2016 11:27 PM
  • User347430248 posted

    Hi Gunderj,

    please see the example mentioned below.

    HTML Code:

    <div id="sortThis">
        <div id="1"><span class="style">Alice</span></div>
        <div id="2"><span class="style">Clive</span></div>
        <div id="3"><span class="style">Berry</span></div>
    </div>
    <button id="sStyle" class="btnSort">Sort By Style</button><br />

    JS Code:

    function sortUsingNestedText(parent, childSelector, keySelector) {
        var items = parent.children(childSelector).sort(function(a, b) {
            var vA = $(keySelector, a).text();
            var vB = $(keySelector, b).text();
            return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        });
        parent.append(items);
    }
    $('#sStyle').data("sortKey", "span.style");
    $("button.btnSort").click(function() {
       sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
    });
    
    
    

    Output:

    Live Example:

    Div Sorting JSFiddle

    Regards

    Deepak

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 12:35 AM