Как сортировать Div по атрибуту в JQuery

Question

У меня есть структура DIV, подобная этой, и хотелось бы отсортировать ее с помощью следующей опции.

1. Что-новые
2. Рекомендуемые
3. цен вниз
4. цены на

ДИВ Структура

<div class="product-result-panel product-list"> 
    <div class="show-all-products"> 
     <div class="ProductList product filter-enable"> 
      <a href="image1.jpg" data-productid="1870" data-price="29.99" data-msrp="59.99" data-isfeatured="" data-isnew="" data-gender="WOMENS" data-colour="BLUE"> 
     </div> 
     <div class="ProductList product filter-disable"> 
      <a href="image2.jpg" data-productid="1871" data-price="46.99" data-msrp="59.99" data-isfeatured="10" data-isnew="" data-gender="WOMENS" data-colour="PURPLE"> 
     </div> 

     <div class="ProductList product filter-enable"> 
      <a href="image3.jpg" data-productid="1872" data-price="19.99" data-msrp="59.99" data-isfeatured="" data-isnew="44" data-gender="MENS" data-colour="ORANGE"> 
     </div> 
     <div class="ProductList product filter-enable"> 
      <a href="image4.jpg" data-productid="1872" data-price="59.99" data-msrp="99.99" data-isfeatured="" data-isnew="12" data-gender="MENS" data-colour="BLACK"> 
     </div> 
    </div> 
</div> 

СНП-Критерии

Так что, когда пользователи выбирают price-low, он должен сортировать только filter-enable DIV, используя атрибут данных цен и сортировать по НИЗКИМ до высокого уровня, filter-enable видна на странице и filter-disable скрыта в DOM

Jquery кодекса получили до сих пор

// DropDownList change event 
$(document).on('change', ".sorting", function (e) { 
     e.preventDefault(); 
     var sortString = $(".sorting option:selected").val(); 
     SortBy(sortString); 
    }); 

function SortBy(sortString) { 
     switch(sortString) { 
      case "featured": 
       { 
        sortUsingNestedText($('.show-all-products'), ".ProductList:visible", "data-isfeatured"); 
        break; 
       } 
      case "whats-new": 
       { 
        sortUsingNestedText($('.show-all-products'), ".ProductList:visible", "data-isnew"); 
        break; 
       } 
      case "price-down": 
       { 
        sortUsingNestedText($('.show-all-products'), "div", "data-price"); 
        break; 
       } 
      case "price-up": 
       { 
        sortUsingNestedText($('.show-all-products'), "div", "data-price"); 
        break; 
       } 
     } 
    } 

function sortUsingNestedText(parent, childSelector, keySelector) { 
     var items = parent.children(childSelector).sort(function (a, b) { 
      var vA = $(keySelector, a).text(); 
      var vB = $(keySelector, b).text(); 
      return (vA < vB) ? -1 : (vA > vB) ? 1 : 0; 
     }); 
     parent.append(items); 
    } 

ERROR

нет ошибки, но это не делает каких-либо сортировкой, только первый и второй DIV являются получение отсортирован. не все из них. Это потому, что у некоторых из DIV нет данных - isfeatured, data-isnew значения?

Answer 1

Я нашел основную причину. Вы используете неправильный селектор. Почему что-то вроде «$ (keySelector, a)», что это $ («цена данных», «div»)? второй: вы получите текст, но вам нужно Аттрибут данных и данных внутри «а» не в «DIV» Вы должны использовать что-то вроде:

var vA = $(a).children().attr(keySelector); 
var vB = $(b).children().attr(keySelector); 

При использовании этого ваша цена-вверх будет работать (цена- вниз дают точно такие же = те же параметры, помещенные внутри одной и той же функции)

Answer 2

Перед сортировкой по цене вам необходимо преобразовать строки в поплавки.

.sort(function (a, b) { 
      var vA = parseFloat($(a).chilren().data(keySelector)); 
      var vB = parseFloat($(b).chilren().data(keySelector)); 
      return vA - vB; 
     }) 

Как @Adeptus отметил keySelector должен быть без data- префикса. `