Sorting using jQuery

Question

I have the following codes. How can I sort them in DESC order using jQuery? Or is it possible to use CSS to sort? But I prefer jQuery...

<div class="bf-attr-block-cont">

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="2pm.com" name="attribute_value[2][]" id="bf-attr-2-0">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-0">2pm.com</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">4</span></span>
</div>

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="Adidas" name="attribute_value[2][]" id="bf-attr-2-1">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-1">Adidas</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">2</span></span>
</div>

<div class="bf-attr-filter bf-attr-2 bf-row">
    <span class="bf-cell bf-c-1">
        <input type="checkbox" value="AJ Morgan" name="attribute_value[2][]" id="bf-attr-2-2">
    </span>
    <span class="bf-cell bf-c-2">
        <label class="bf-attr-val" for="bf-attr-2-2">AJ Morgan</label>
    </span>
    <span class="bf-cell bf-c-3"><span class="bf-count">2</span></span>
</div>

check this : [link](http://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery) — Majid Akbari, May 25 '14 at 06:51
@MajidAkbari, i need to sort numerically, not alphebetically — redcoder, May 25 '14 at 06:56
@YuryTarabanko This doesn't answer the real problem : OP wants to rearrange the elements — Denys Séguret, May 25 '14 at 06:59
Yh, i want to rearrange the element in DESC order against the bf-count — redcoder, May 25 '14 at 06:59
@dystroy It does, combined with the link from the first comment. — Yury Tarabanko, May 25 '14 at 07:00
@YuryTarabanko The answer accepted in the first link should not be used : it breaks all event handler bindings. It's a very bad solution when you have jQuery. But other answers are fine, you're right, I'll close this question. — Denys Séguret, May 25 '14 at 07:03

Denys Séguret · Accepted Answer · 2014-05-25T07:04:23.613

1

If you want an alphabetical sort on the labels, you can do this :

$('.bf-attr-block-cont').append($('.bf-attr-block-cont .bf-attr-filter').sort(function(d1,d2){
   var s1 = $('label', d1).text().trim().toLowerCase(), 
       s2 = $('label', d2).text().trim().toLowerCase();
   if (s1===s2) return 0;
   return s1<s2 ? 1 : -1;
}));

Demonstration

If you want to sort according to the .bf-count, do this :

$('.bf-attr-block-cont').append($('.bf-attr-block-cont .bf-attr-filter').sort(function(d1,d2){
   var s1 = parseFloat($('.bf-count', d1).text().trim()), 
       s2 = parseFloat($('.bf-count', d2).text().trim());
   if (s1===s2) return 0;
   return s1<s2 ? 1 : -1;
}));

Demonstration

Note that those sorts don't break event handler bindings, contrary to naive solutions changing innerHTML.

edited May 25 '14 at 07:04

answered May 25 '14 at 06:57

Denys Séguret

372,613
87
782
758

the demo looks good, let me put them in my codes and will revert back – redcoder May 25 '14 at 07:19
i tested on my code but it seems clash with the first div of .bf-attr-block-cont. So I tried to added in new class "brands" into the second div of .bf-attr-block-cont and replace the bf-attr-block-cont in your js code, but it doesn't sort . – redcoder May 25 '14 at 07:41
Can you reproduce your problem in a minimal fiddle ? – Denys Séguret May 25 '14 at 07:42
I copied the codes from my site to your JS Bin and it seems working well.IS it because of the js conflict on my site? – redcoder May 25 '14 at 07:48
@redcoder Hard to tell without more info. I'd suggest you [debug to see what happens](https://developer.chrome.com/extensions/tut_debugging). – Denys Séguret May 25 '14 at 07:49
please hv a look at my site at http://styles.my/thestar/index.php?route=product/category&path=61_107 I need to sort the BRAND section on the left menu... – redcoder May 25 '14 at 07:49
dunno why the s1 and s2 value is NaN NaN – redcoder May 25 '14 at 08:07
Look at what's inside `$('.bf-count', d1).text()`. – Denys Séguret May 25 '14 at 08:08
realised I am using jQUery 1.7.1 , does the sort function available in ver 1.7.1 ? – redcoder May 25 '14 at 08:14
here is my console log : console.log("here ",s1, s2, typeof(s1), $('.bf-count', d1).text()); . seems like the $('.bf-count', d1).text() is an empty string. – redcoder May 25 '14 at 08:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54378/discussion-between-redcoder-and-dystroy). – redcoder May 25 '14 at 08:37
dystroy, your code did working well, it was because of my bf-count value is empty on window.load, the value is injected using AJAX, that is why the bf-count was empty when page loaded.SO I put your sorting code in the AJAX call function that insert the bf-count value. Thanks for your time , credit goes to you. – redcoder May 25 '14 at 14:11

Sorting using jQuery

1 Answers1