Как отсортировать элементы с помощью jQuery на основе класса с числовой частью?

Question

Так что я пытался решить мою проблему (вопрос) на основе этой темы:

Sort element by numerical value of data attribute

(Спасибо за это!)

В моем конкретном случае я должен получить числовую часть каждого класс для выполнения той же задачи.

Я создал эту скрипку:

https://jsfiddle.net/z9fugfrq/

Мне нужен числовой порядок.

Сценарий, который я попытался изменить для моих целей:

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

}); 

бросает стрелы, и я не понимаю, почему. Спасибо за помощь заранее!

Гаравани

Answer 1

Есть целый ряд вопросов, в коде

• В скрипке библиотека Jquery не включена
• а и Ь элементы DOM, так что не имеют такие методы, как атр
• Существует нет переменная называется classStr
• родительский элемент имеет класс-оболочка не выбирают курс-3-обертка

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>

Answer 2

Попробуйте это

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

Внесенные изменения

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

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

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

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

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

Answer 3

Как и другие заявили, есть несколько вопросов, которые влияют этот ход. Вы не включили jquery, вы сделали некоторые опечатки с вашими переменными и т. Д.

Я больше не буду их освещать.

Есть и другие вещи, которые вы могли бы сделать намного лучше, чтобы избежать некоторых из этих проблем, в первую очередь, имея более простой код.

Нет необходимости дублировать код для извлечения номера элемента из элемента. Это можно извлечь из функции.

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

Это может быть использовано в функции сравнения для извлечения каждого индекса.

Хранение этой информации в классе - это злоупотребление тем, что класс действительно предназначен для. Вы можете поместить номера позиций вместо data-* attributes.

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

Затем, чтобы получить эти данные атрибуты с JQuery вы можете использовать jquery.data().

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