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.
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.
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?
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?
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
246 Points
471 Posts
jquery each loop how to sort on div ID that is not integer
Nov 27, 2016 03:16 PM|gunderj|LINK
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>
All-Star
52241 Points
23303 Posts
Re: jquery each loop how to sort on div ID that is not integer
Nov 27, 2016 03:46 PM|mgebhard|LINK
Well, text is sort by alpha. That's just the way it works. For example, sorting ascending will result in the following.
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.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
Member
246 Points
471 Posts
Re: jquery each loop how to sort on div ID that is not integer
Nov 27, 2016 04:10 PM|gunderj|LINK
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?
All-Star
52241 Points
23303 Posts
Re: jquery each loop how to sort on div ID that is not integer
Nov 27, 2016 05:41 PM|mgebhard|LINK
Then you should be ok. What exactly is the problem?
Member
246 Points
471 Posts
Re: jquery each loop how to sort on div ID that is not integer
Nov 27, 2016 06:55 PM|gunderj|LINK
The problem is I can only find sort routines that expect an integer. How can I sort my divs by an alpha ID?
Star
9831 Points
3120 Posts
Re: jquery each loop how to sort on div ID that is not integer
Nov 28, 2016 09:24 AM|Brando ZWZ|LINK
Hi gunderj,
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