locked
jquery each loop how to sort on div ID that is not integer RRS feed

  • Question

  • User1868852945 posted

    For the below divs with ID names "left_panel_line_container1", "left_panel_line_container2", "left_panel_line_container3" and "left_panel_line_container4", is there a way in jquery to loop thru these divs sorted on ID?  The only samples I see here are for the ID being an integer which my IDs are not.

    Thanks for any feedback.

    <div class="left_panel_line_container" id="left_panel_line_container3">
    <div class="left_panel_line" id="left_panel_line1" data-capture_date="init" data-object_name=""></div>
    <div class="left_panel_line_delete" id="left_panel_line_delete1" data-capture_date="init" data-object_name="">X</div>
    </div>
    <div class="left_panel_line_container" id="left_panel_line_container2">
    <div class="left_panel_line" id="left_panel_line2" data-capture_date="init" data-object_name=""></div>
    <div class="left_panel_line_delete" id="left_panel_line_delete2" data-capture_date="init" data-object_name="">X</div>
    </div>
    <div class="left_panel_line_container" id="left_panel_line_container1">
    <div class="left_panel_line" id="left_panel_line3" data-capture_date="init" data-object_name=""></div>
    <div class="left_panel_line_delete" id="left_panel_line_delete3" data-capture_date="init" data-object_name="">X</div>
    </div>
    <div class="left_panel_line_container" id="left_panel_line_container4">
    <div class="left_panel_line" id="left_panel_line4" data-capture_date="init" data-object_name=""></div>
    <div class="left_panel_line_delete" id="left_panel_line_delete4" data-capture_date="init" data-object_name="">X</div>
    </div>

    Sunday, November 27, 2016 3:16 PM

Answers

  • User283571144 posted

    Hi gunderj,

    The problem is I can only find sort routines that expect an integer.  How can I sort my divs by an alpha ID?

    As far as I know, if we want to sort something, we need firstly know how to compare them.

    This is why we normally used integer to achieve sorting, it is very easily.

    Besides, we couldn't understand your requirement clearly.

    Do you mean you want to sort the div by the div's id?

    If this is your requirement, I suggest you could use jQuery sort method to achieve your requirement.

    I suggest you could get the div id and use replace method to delete "left_panel_line_container".

    Then you could compare the integer.

    If you want to write your custom logic, you could change the codes inside the sort method.

    More details, you could refer to follow codes:

    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
                var divs = $(".left_panel_line_container");
                $('#alphBnt').on('click', function () {
                    var alphabeticallyOrderedDivs = divs.sort(function (a, b) {
                        //here you could write your own logic
                        var ra = a.id.replace("left_panel_line_container", "");
                        var rb = b.id.replace("left_panel_line_container", "");
                        return ra > rb;
                    });
                    $("#Test1").append(alphabeticallyOrderedDivs);
                });
            });
        </script>
    </head>
    <body>
        <div id="Test1">
    
            <div class="left_panel_line_container" id="left_panel_line_container3">
                <div class="left_panel_line" id="left_panel_line1" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete1" data-capture_date="init" data-object_name="">X3</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container2">
                <div class="left_panel_line" id="left_panel_line2" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete2" data-capture_date="init" data-object_name="">X2</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container1">
                <div class="left_panel_line" id="left_panel_line3" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete3" data-capture_date="init" data-object_name="">X1</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container4">
                <div class="left_panel_line" id="left_panel_line4" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete4" data-capture_date="init" data-object_name="">X4</div>
            </div>
        </div>
    
        <div id="aaa">
    
        </div>
        <button id="alphBnt">Alphabetical</button>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 28, 2016 9:24 AM

All replies

  • User475983607 posted

    For the below divs with ID names "left_panel_line_container1", "left_panel_line_container2", "left_panel_line_container3" and "left_panel_line_container4", is there a way in jquery to loop thru these divs sorted on ID?  The only samples I see here are for the ID being an integer which my IDs are not.

    Well, text is sort by alpha. That's just the way it works.  For example, sorting ascending will result in the following.

    left_panel_line_container10
    left_panel_line_container4

    Which is correct because 1 is less than 4.

    I suggest that you use a different strategy. How about using a data attribute identify the sort order.

    <div class="left_panel_line_container" id="left_panel_line_container1" data-sort"1">
    <div class="left_panel_line_container" id="left_panel_line_container2" data-sort"2">
    <div class="left_panel_line_container" id="left_panel_line_container3" data-sort"3">
    <div class="left_panel_line_container" id="left_panel_line_container4" data-sort"4">

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

    Sunday, November 27, 2016 3:46 PM
  • User1868852945 posted

    Thanks but in my case I will always have 9 or less lines with this kind of naming so I was hoping to just sort on the ID and I still hope this is possible?

    Sunday, November 27, 2016 4:10 PM
  • User475983607 posted

    Thanks but in my case I will always have 9 or less lines with this kind of naming so I was hoping to just sort on the ID and I still hope this is possible?

    Then you should be ok.  What exactly is the problem?

    Sunday, November 27, 2016 5:41 PM
  • User1868852945 posted

    The problem is I can only find sort routines that expect an integer.  How can I sort my divs by an alpha ID?

    Sunday, November 27, 2016 6:55 PM
  • User283571144 posted

    Hi gunderj,

    The problem is I can only find sort routines that expect an integer.  How can I sort my divs by an alpha ID?

    As far as I know, if we want to sort something, we need firstly know how to compare them.

    This is why we normally used integer to achieve sorting, it is very easily.

    Besides, we couldn't understand your requirement clearly.

    Do you mean you want to sort the div by the div's id?

    If this is your requirement, I suggest you could use jQuery sort method to achieve your requirement.

    I suggest you could get the div id and use replace method to delete "left_panel_line_container".

    Then you could compare the integer.

    If you want to write your custom logic, you could change the codes inside the sort method.

    More details, you could refer to follow codes:

    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
                var divs = $(".left_panel_line_container");
                $('#alphBnt').on('click', function () {
                    var alphabeticallyOrderedDivs = divs.sort(function (a, b) {
                        //here you could write your own logic
                        var ra = a.id.replace("left_panel_line_container", "");
                        var rb = b.id.replace("left_panel_line_container", "");
                        return ra > rb;
                    });
                    $("#Test1").append(alphabeticallyOrderedDivs);
                });
            });
        </script>
    </head>
    <body>
        <div id="Test1">
    
            <div class="left_panel_line_container" id="left_panel_line_container3">
                <div class="left_panel_line" id="left_panel_line1" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete1" data-capture_date="init" data-object_name="">X3</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container2">
                <div class="left_panel_line" id="left_panel_line2" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete2" data-capture_date="init" data-object_name="">X2</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container1">
                <div class="left_panel_line" id="left_panel_line3" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete3" data-capture_date="init" data-object_name="">X1</div>
            </div>
            <div class="left_panel_line_container" id="left_panel_line_container4">
                <div class="left_panel_line" id="left_panel_line4" data-capture_date="init" data-object_name=""></div>
                <div class="left_panel_line_delete" id="left_panel_line_delete4" data-capture_date="init" data-object_name="">X4</div>
            </div>
        </div>
    
        <div id="aaa">
    
        </div>
        <button id="alphBnt">Alphabetical</button>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 28, 2016 9:24 AM