Sort Multiple Elements of the same type in jQuery

Question:

Basically I have the following that is rendered by PHP:

<div class="parent">
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
</div>

and what I want returned is:

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=3>3</div>
</div>

So basically it must sort multiple instances of the parent based on the data sort attribute of each child while still maintaing its state within the parent element.

How would you use jQuery to target each parent element and then sort each child within that parent based on the data-sort attribute.

This is the closest I have come, but it does not render anything:

<script>
jQuery(document).ready(function($) {
    jQuery.each('.parent', function(index, val) {
        jQuery(jQuery(this).children('.child')).sort(function(a,b){
            return a.dataset.sort > b.dataset.sort;
        }).appendTo(this);
    });
});
</script>

Thanks in advance!

You've tried to use a sort method on a jQuery object, but they don't have (a documented) one. Arrays have a sort, though, and then if you append the sorted array, the children get moved:

jQuery(document).ready(function($) {
    $('.parent').each(function() {
        var p = $(this);
        p.append(p.children(".child").get().sort(function(a, b) {
            return $(a).attr("data-sort") - $(b).attr("data-sort");
        }));
    });
});

<div class="parent">
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
</div>

<div class="parent">
    <div class="child" data-sort=1>1</div>
    <div class="child" data-sort=3>3</div>
    <div class="child" data-sort=2>2</div>
    <div class="child" data-sort=2>2</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How that works:

• We loop through the .parent elements

• Within those, we get the children, and get an array of them by using .get()

• Then we sort that array, using a callback that makes use of the fact that when you use the binary - operator on strings, they get converted to numbers; so $(a).attr("data-sort") - $(b).attr("data-sort") ends up being negative of a's order was lower than b's, 0 if they were the same, or positive if b's order was higher than a's

• ...and append it to parent again, which moves the elements

Note that the above assumes that either there are no non-.child children in .parent elements, or that you want the .child children to end up after any other children in the .parent.

Related:

Converting “i+=n” for-loop to $.each

Parsing XML array using Jquery

How To Check Value Of String

Set default value for struts 2 autocompleter

Javascript: Forloop Difference between i++ and (i+1)

session value in javascript cannot be set

Detect when the jQuery UI slider is being moved?

Javscript Replace Text in tags without changing children element HTML and Content

How to get my node.js mocha test running?

change css dynamically by selecting dropdown list item

Angular $http and Fusion Tables in IE9

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

writing jQuery instead of $ to access controls in a page

Replacing elements in an HTML file with JSON objects

Saving data using promises

want to show and hide text using “this” jquery

How to find the days b/w two long date values

submitting form then showing loading image by javascript

access the json encoded object returned by php in jquery

Login Signup PopUp

How to remove all the borders of a selectbox?

Google map infowindow position

Automatically calling server side class without

Sockets make no sense?

slideToggle state not working with multiple boxes

Javascript sort array of objects in reverse chronological order

How to remove legend from bottom of chart - amcharts

Click on link next link should be display on same page

Get all prices with $ from string into an array in Javascript

How to remove unmatched row in html table using jquery

Teechart HTML5, line color and thickness

Dynamically resize side-by-side images with different dimensions to the same height

Identifier starts immediately after numeric literal

Can't call fetch directly in Backbone model listenTo

Get elements containing text from array

Substring of a file

show div only when printing

Not able to access variables in required file

Cant submit form

Javascript function to validate contents of an array

Javascript change the souce of all images present inside a string