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
– Arun P Johny, Commented Apr 12, 2016 at 8:06
a and b are dom elements so don't have methods like attr, there is no variable called classStr — Arun P Johny
– Arun P Johny, Commented Apr 12, 2016 at 8:07
The parent element has the class wrapper not choose-course-3-wrapper — Arun P Johny
– Arun P Johny, Commented Apr 12, 2016 at 8:07

Rino Raj · Accepted Answer · 2016-04-12 08:07:50Z

2

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);

answered Apr 12, 2016 at 8:07

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Garavani Over a year ago

Sorry, I didn’t see that you answered first!

Rino Raj Over a year ago

It happens. No problem. Main thing is to solve your problem. I am glad that it is solved :)

Arun P Johny · Accepted Answer · 2016-04-12 08:11:58Z

1

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>

answered Apr 12, 2016 at 8:11

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Garavani Over a year ago

Thanks so much Arun! Awesome how fast you were. Thanks for all the comments. I will try to understand what you did. Thanks again!

moreON · Accepted Answer · 2016-04-12 08:20:30Z

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');

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related