如何在Jquery中按屬性排序Div

Question

我有這樣的DIV結構，並希望使用以下選項進行排序。

1. 最優價格新
2. 精選
3. 價格下降
4. 價格高達

DIV結構

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

排序標準

因此，當用戶選擇​​，它應該只分選出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沒有數據特徵，數據是新值？

Answer 1

我發現主要原因。您正在使用錯誤的選擇器。爲什麼像「$（keySelector，a）」它是什麼$（「數據價格」，「股利」）？ 第二：你的文字，但你需要的數據ATTR和數據是內部「一個」不「分區」你應該使用這樣的：當你使用這個你的價格行動將是工作

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-前綴。 `