How to sort elements with jQuery based on class with numeric part?

Question

So I tried to solve my problem (question) based on this topic:

Sort element by numerical value of data attribute

(Thank you for that!)

In my particular case I have to retrieve a numeric part of each class to do the same task.

I created this fiddle:

https://jsfiddle.net/z9fugfrq/

I need a numeric order.

The script that I tried to modify for my purposes:

jQuery(document).ready(function(){

var $wrapper = $('.choose-course-3-wrapper');

$wrapper.find('.item-course').sort(function(a, b) {

    var aclassStr = a.attr('class'),
        asortNum = classStr.substr( classStr.lastIndexOf('-') + 1);
    var bclassStr = a.attr('class'),
        bsortNum = classStr.substr( classStr.lastIndexOf('-') + 1);

    return +asortNum - +bsortNum;
})
.appendTo($wrapper);

} );

throws arrows and I do not understand why. Thanks for help in advance!

Garavani

There are multiple issues in the code starting with jQuery is not included in the fiddle — Arun P Johny, Apr 12 '16 at 08:06
`a` and `b` are dom elements so don't have methods like `attr`, there is no variable called `classStr` — Arun P Johny, Apr 12 '16 at 08:07
The parent element has the class `wrapper` not `choose-course-3-wrapper` — Arun P Johny, Apr 12 '16 at 08:07

score 2 · Answer 1 · answered Apr 12 '16 at 08:07

Try this

jQuery(document).ready(function(){  

    var $wrapper = $('.wrapper');
    $wrapper.find('.item-course').sort(function(a, b) {
        var aclassStr = $(a).attr('class'),
            asortNum = aclassStr.substr( aclassStr.lastIndexOf('-') + 1);
        var bclassStr = $(b).attr('class'),
            bsortNum = bclassStr.substr( bclassStr.lastIndexOf('-') + 1);
        return +asortNum - +bsortNum;
    })
    .appendTo($wrapper);

} );

Demo Fiddle

Changes Made

► $('.choose-course-3-wrapper') to $('.wrapper')

► a.attr('class') to $(a).attr('class')

► b.attr('class') to $(b).attr('class')

► classStr.substr( classStr.lastIndexOf('-') + 1); to aclassStr.substr( aclassStr.lastIndexOf('-') + 1);

► classStr.substr( classStr.lastIndexOf('-') + 1); to bclassStr.substr( bclassStr.lastIndexOf('-') + 1);

It happens. No problem. Main thing is to solve your problem. I am glad that it is solved `:)` — Rino Raj, Apr 12 '16 at 08:56

score 1 · Accepted Answer · answered Apr 12 '16 at 08:11

There are a number of issues in the code

In the fiddle jQuery library is not included
a and b are dom elements so don't have methods like attr
There is no variable called classStr
The parent element has the class wrapper not choose-course-3-wrapper

So

jQuery(function($) {
  var $wrapper = $('.wrapper'); //class name is wring
  $wrapper.find('.item-course').sort(function(a, b) {
    var aclassStr = a.className,
      asortNum = aclassStr.match(/item-(\d+)/)[1]; //variable names was wrong, here regex is used to extract the number
    var bclassStr = b.className,
      bsortNum = bclassStr.match(/item-(\d+)/)[1];
    return +asortNum - +bsortNum;
  }).appendTo($wrapper);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="item-course item-39">thirtynine</div>
  <div class="item-course item-28">twentyeight</div>
  <div class="item-course item-52">fiftytwo</div>
  <div class="item-course item-45">fourtyfive</div>
  <div class="item-course item-26">twentysix</div>
  <div class="item-course item-51">fiftyone</div>
</div>

Thanks so much Arun! Awesome how fast you were. Thanks for all the comments. I will try to understand what you did. Thanks again! — Garavani, Apr 12 '16 at 08:17

score 0 · Answer 3 · answered Apr 12 '16 at 08:20

As others have stated there are several issues that impact this running. You didn't include jquery, you've made some typos with your variables etc.

I won't cover those again.

There are other things that you could also do much better to possibly avoid some of these problems in the first place by having easier-to-write code.

There is no need to duplicate the code to extract the item number from an element. This can be extracted into a function.

function getItemNum(el){
  var $el = $(el);
  var classStr = $el.attr('class');
  var sortNum = classStr.substr(classStr.lastIndexOf('-') + 1);
  return +sortNum;
};

This can then be used within the comparison function to extract each index.

Storing this information in class is an abuse of what class is really meant for. You can put the item numbers instead into data-* attributes.

<div class="item-course" data-item="39">thirtynine</div>

Then to get these data attributes with jquery you can use jquery.data().

var itemNum = +$(element).data('item');

How to sort elements with jQuery based on class with numeric part?

3 Answers3