Order a list of anchors on a page by a data-attribute?

Question

I have this bit of code:

<div class="list-group">
<a class="list-group-item" data-order="10" href="/pdf/Early%20Childhood/Little%20Treasures/0.10_Sample%20Document%203%20-%20Copy%20(3).pdf">10 : Sample Document 3 - Copy (3).pdf</a>
<a class="list-group-item" data-order="11" href="/pdf/Early%20Childhood/Little%20Treasures/0.11_Sample%20Document%203%20-%20Copy.pdf">11 : Sample Document 3 - Copy.pdf</a>
<a class="list-group-item" data-order="12" href="/pdf/Early%20Childhood/Little%20Treasures/0.12_Sample%20Document%203.pdf">12 : Sample Document 3.pdf</a>
<a class="list-group-item" data-order="13" href="/pdf/Early%20Childhood/Little%20Treasures/0.13_Sample%20Document%204%20-%20Copy%20(2).pdf">13 : Sample Document 4 - Copy (2).pdf</a>
<a class="list-group-item" data-order="14" href="/pdf/Early%20Childhood/Little%20Treasures/0.14_Sample%20Document%204%20-%20Copy%20(3).pdf">14 : Sample Document 4 - Copy (3).pdf</a>
<a class="list-group-item" data-order="15" href="/pdf/Early%20Childhood/Little%20Treasures/0.15_Sample%20Document%204%20-%20Copy.pdf">15 : Sample Document 4 - Copy.pdf</a>
<a class="list-group-item" data-order="16" href="/pdf/Early%20Childhood/Little%20Treasures/0.16_Sample%20Document%204.pdf">16 : Sample Document 4.pdf</a>
<a class="list-group-item" data-order="1" href="/pdf/Early%20Childhood/Little%20Treasures/0.1_Sample%20Document%20-%20Copy%20(2).pdf">1 : Sample Document - Copy (2).pdf</a>
<a class="list-group-item" data-order="2" href="/pdf/Early%20Childhood/Little%20Treasures/0.2_Sample%20Document%20-%20Copy%20(3).pdf">2 : Sample Document - Copy (3).pdf</a>
<a class="list-group-item" data-order="3" href="/pdf/Early%20Childhood/Little%20Treasures/0.3_Sample%20Document%20-%20Copy.pdf">3 : Sample Document - Copy.pdf</a>
<a class="list-group-item" data-order="4" href="/pdf/Early%20Childhood/Little%20Treasures/0.4_Sample%20Document%202%20-%20Copy%20(2).pdf">4 : Sample Document 2 - Copy (2).pdf</a>
<a class="list-group-item" data-order="5" href="/pdf/Early%20Childhood/Little%20Treasures/0.5_Sample%20Document%202%20-%20Copy%20(3).pdf">5 : Sample Document 2 - Copy (3).pdf</a>
<a class="list-group-item" data-order="6" href="/pdf/Early%20Childhood/Little%20Treasures/0.6_Sample%20Document%202%20-%20Copy.pdf">6 : Sample Document 2 - Copy.pdf</a>
<a class="list-group-item" data-order="7" href="/pdf/Early%20Childhood/Little%20Treasures/0.7_Sample%20Document%202.pdf">7 : Sample Document 2.pdf</a>
<a class="list-group-item" data-order="8" href="/pdf/Early%20Childhood/Little%20Treasures/0.8_Sample%20Document.pdf">8 : Sample Document.pdf</a>
<a class="list-group-item" data-order="9" href="/pdf/Early%20Childhood/Little%20Treasures/0.9_Sample%20Document%203%20-%20Copy%20(2).pdf">9 : Sample Document 3 - Copy (2).pdf</a>
</div>

I just want to order these anchor tags by the data-order attribute I've added to them.

I'm trying to accomplish this in jquery and/or javascript - but I am struggling with the .sort function.

Anyone have a nice clean way to accomplish this?

You can see where I'm at here: https://jsfiddle.net/hannylicious/p6emruL1/7/ — Hanny, Oct 05 '16 at 15:59

Titus · Accepted Answer · 2016-10-04T20:08:54.130

This should do it:

$("a").sort(function(a,b){
  return parseInt($(a).attr("data-order")) - parseInt($(b).attr("data-order"));
}).appendTo($(".list-group"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="list-group">
<a class="list-group-item" data-order="10" href="/pdf/Early%20Childhood/Little%20Treasures/0.10_Sample%20Document%203%20-%20Copy%20(3).pdf">10 : Sample Document 3 - Copy (3).pdf</a>
<a class="list-group-item" data-order="11" href="/pdf/Early%20Childhood/Little%20Treasures/0.11_Sample%20Document%203%20-%20Copy.pdf">11 : Sample Document 3 - Copy.pdf</a>
<a class="list-group-item" data-order="12" href="/pdf/Early%20Childhood/Little%20Treasures/0.12_Sample%20Document%203.pdf">12 : Sample Document 3.pdf</a>
<a class="list-group-item" data-order="13" href="/pdf/Early%20Childhood/Little%20Treasures/0.13_Sample%20Document%204%20-%20Copy%20(2).pdf">13 : Sample Document 4 - Copy (2).pdf</a>
<a class="list-group-item" data-order="14" href="/pdf/Early%20Childhood/Little%20Treasures/0.14_Sample%20Document%204%20-%20Copy%20(3).pdf">14 : Sample Document 4 - Copy (3).pdf</a>
<a class="list-group-item" data-order="15" href="/pdf/Early%20Childhood/Little%20Treasures/0.15_Sample%20Document%204%20-%20Copy.pdf">15 : Sample Document 4 - Copy.pdf</a>
<a class="list-group-item" data-order="16" href="/pdf/Early%20Childhood/Little%20Treasures/0.16_Sample%20Document%204.pdf">16 : Sample Document 4.pdf</a>
<a class="list-group-item" data-order="1" href="/pdf/Early%20Childhood/Little%20Treasures/0.1_Sample%20Document%20-%20Copy%20(2).pdf">1 : Sample Document - Copy (2).pdf</a>
<a class="list-group-item" data-order="2" href="/pdf/Early%20Childhood/Little%20Treasures/0.2_Sample%20Document%20-%20Copy%20(3).pdf">2 : Sample Document - Copy (3).pdf</a>
<a class="list-group-item" data-order="3" href="/pdf/Early%20Childhood/Little%20Treasures/0.3_Sample%20Document%20-%20Copy.pdf">3 : Sample Document - Copy.pdf</a>
<a class="list-group-item" data-order="4" href="/pdf/Early%20Childhood/Little%20Treasures/0.4_Sample%20Document%202%20-%20Copy%20(2).pdf">4 : Sample Document 2 - Copy (2).pdf</a>
<a class="list-group-item" data-order="5" href="/pdf/Early%20Childhood/Little%20Treasures/0.5_Sample%20Document%202%20-%20Copy%20(3).pdf">5 : Sample Document 2 - Copy (3).pdf</a>
<a class="list-group-item" data-order="6" href="/pdf/Early%20Childhood/Little%20Treasures/0.6_Sample%20Document%202%20-%20Copy.pdf">6 : Sample Document 2 - Copy.pdf</a>
<a class="list-group-item" data-order="7" href="/pdf/Early%20Childhood/Little%20Treasures/0.7_Sample%20Document%202.pdf">7 : Sample Document 2.pdf</a>
<a class="list-group-item" data-order="8" href="/pdf/Early%20Childhood/Little%20Treasures/0.8_Sample%20Document.pdf">8 : Sample Document.pdf</a>
<a class="list-group-item" data-order="9" href="/pdf/Early%20Childhood/Little%20Treasures/0.9_Sample%20Document%203%20-%20Copy%20(2).pdf">9 : Sample Document 3 - Copy (2).pdf</a>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</div>

The idea is to detach the elements before you sort them and reattach them when you're done.

If I have multiple divs with similar lists on the same page - how do I tell it to differentiate each? — Hanny, Oct 04 '16 at 19:51
@dfsq Yes, you're right, `detach()` is not required. I thought that because the parent already contains those elements, `appendTo()` will be ignored. — Titus, Oct 04 '16 at 20:09
Still having some issues - but I'm close. See this fiddle: https://jsfiddle.net/hannylicious/p6emruL1/7/ — Hanny, Oct 05 '16 at 15:45
@Hanny Your approach is more complicated then it has to. Try this https://jsfiddle.net/bdcgx7wc/ The problem with your fiddler is that you've put the `replaceWith` call inside the `sort(...)` function, after the `return`, that `replaceWith` function will never be executed. — Titus, Oct 05 '16 at 20:41

score 0 · Answer 2 · answered Oct 04 '16 at 20:00

0

Here's just another suggestion:

var sorted = $('.list-group-item').sort(function (a, b) {
  var contentA = parseInt( $(a).data('order'));
  var contentB = parseInt( $(b).data('order'));

  return (contentA < contentB) ? - 1 : (contentA > contentB) ? 1 : 0;
})

$('.list-group').replaceWith(sorted.each(function(obj, link){
  return link;
}))

And a working example here.

Logic:

Make an ordered array of elements using their data property;
Select the div and replace it's content with the sorted array of elements.

answered Oct 04 '16 at 20:00

Mihailo

4,736
4
22
30

what if I have multiple lists on the same page? – Hanny Oct 04 '16 at 20:36
You could wrap this up in a function and then pass the corresponding selectors as parameters. – Mihailo Oct 05 '16 at 00:22

Order a list of anchors on a page by a data-attribute?

2 Answers2