jQuery/Javascript - Sort Parent Divs Based on A number in Child Divs

Question

Lets say we have the following html div structure.

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

Using jQuery, how can I just clone/copy-paste the "article" divs in the ascending/descending order of the number coming in their children values. So I get result like this.

 <div class="article-container">

      <div class="article">
         <div class="article-child">views 10</div>
      </div>
      <div class="article">
         <div class="article-child">views 9</div>
      </div>
      <div class="article">
         <div class="article-child">views 5</div>
      </div>
      <div class="article">
         <div class="article-child">views 3</div>
      </div>
      <div class="article">
         <div class="article-child">views 1</div>
      </div>

 </div>

I was trying to prepare algorithm for it before I code. I know how to code in jQuery and the copy paste stuff but I am not sure how would I achieve this.

That would have been very easy if that was the case but really, the attributes aren't present in my case. I am presented with this exact situation. — Awais Umar, Aug 19 '15 at 08:25
so then extract the values of the children, safe the parent element in an array and then u can sort them as u want — Snackaholic, Aug 19 '15 at 08:26
safe them in an array like this array[ [value, parent], [value, parent]] this way you can compare their values — Snackaholic, Aug 19 '15 at 08:28
Similar to http://stackoverflow.com/questions/13490391/jquery-sort-elements-using-data-id this might help. — Annapoorni D, Aug 19 '15 at 08:32

Andrea Salicetti · Accepted Answer · 2015-08-19T09:31:13.117

7

You can try this:

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text();
  var textB = +$(b).find('.article-child').text();

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

See demo here

If you must consider the text, you should use a regexp:

var cont = $(".article-container");
var arr = $.makeArray(cont.children(".article"));

arr.sort(function(a, b) {
  var textA = +$(a).find('.article-child').text().match(/views (\d+)/)[1];
  var textB = +$(b).find('.article-child').text().match(/views (\d+)/)[1];

  if (textA < textB) return 1;
  if (textA > textB) return -1;

  return 0;
});

cont.empty();

$.each(arr, function() {
    cont.append(this);
});

See demo here

edited Aug 19 '15 at 09:31

answered Aug 19 '15 at 08:28

Andrea Salicetti

2,423
24
37

This is a good approach. I am giving it a try. Will share the response here in a while. Thank you. – Awais Umar Aug 19 '15 at 08:35
Please, read again, I've made a little fix to match exactly your sort order – Andrea Salicetti Aug 19 '15 at 08:38
This is exactly working for if I have numbers only on the child div. What if I have strings along with the numbers in the child elements. I guess we will have to use regex to get numbers out of it. Let me edit the question. And really very thankful to this help. – Awais Umar Aug 19 '15 at 08:52

jQuery/Javascript - Sort Parent Divs Based on A number in Child Divs

1 Answers1

Linked