如何在Jquery中按属性排序Div [英] How to Sort Div by attribute in Jquery

问题描述

1. Whats-new
$ b我有一个这样的DIV结构，并希望使用以下选项进行排序。 $ b
2. 精选


3. 降价


4. 定价

DIV Structure

 < div class =product-result-panel product-list> 
< div class =show-all-products> 
< div class =ProductList product filter-enable> 
< a href =image1.jpgdata-productid =1870data-price =29.99data-msrp =59.99data-isfeatured =data-isnew =data-gender =WOMENSdata-color =BLUE> 
< / div> 
< div class =ProductList product filter-disable> 
 < / div> 
 
< div class =ProductList product filter-enable> 
 < / div> 
< div class =ProductList product filter-enable> 
 < / div> 
< / div> 
< / div> 
  

SORT-Criteria

选择 price-low ，它应该使用data-price属性对 filter-enable div进行排序并按LOW- TO-HIGH， filter-enable 在页面中可见， filter-disable 隐藏在DOM中

到目前为止获得的jquery代码

  // DropDownList更改事件
 $（document）.on（'change'，.sorting，function（e）{
 e.preventDefault（）; 
 var sortString = $（。sorting option：selected）。val （）; 
 SortBy（sortString）; 
}）; 
 
函数SortBy（sortString）{
 switch（sortString）{
 casefeatured：
 {
 sortUsingNestedText（$（'。show-all -products'），.ProductList：visible，data-isfeatured）; 
休息; 
} 
 casewhats-new：
 {
 sortUsingNestedText（$（'。show-all-products'），.ProductList：visible，data-isnew ）; 
休息; 
} 
 caseprice-down：
 {
 sortUsingNestedText（$（'。show-all-products'），div，data-price）; 
休息; 
} 
 caseprice-up：
 {
 sortUsingNestedText（$（'。show-all-products'），div，data-price）; 
休息; 
 
 
 
 $ b函数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）; 
 
 
 
 $ h $ ERROR 
 
 
没有错误，但它没有做任何排序，只有第一和第二个DIV正在排序。不是所有的人。是因为一些DIV没有数据特性，data-isnew值吗？我发现主要原因是这样的。您正在使用错误的选择器。为什么像$（keySelector，a）它是什么$（数据价格，股利）？ 
秒：你得到的文本，但你需要数据attr和数据是a而不是div你应该使用类似的东西：
  var vA = $（a）.children（）。attr（keySelector）; 
 var vB = $（b）.children（）。attr（keySelector）; 
  
当您使用此功能时，您的价格将会正常运作（降价给予完全相同=相同的参数放在同一个函数中）
 
I have a DIV structure like this and would like to sort using following option.

Whats-new    
Featured
price-down
price-up


DIV Structure

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


SORT-Criteria

So when users select price-low, it should sort only filter-enable div's using the data-price attribute and sort by LOW-TO-HIGH, filter-enable is visible on the page and filter-disable is hidden in the DOM

Jquery Code got so far

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

No Error, BUT its not doing any sorting, only first and second DIV's are getting sorted. not all of them. Is it because some of the DIV's dont have data-isfeatured, data-isnew values?
解决方案
I found the primary reason. You are useing wrong selector. Why something like "$(keySelector, a)" what it is $("data-price", "div")?
second: you get text but you need data attr and data is inside "a" not in "div" You should use something like:
var vA = $(a).children().attr(keySelector);
var vB = $(b).children().attr(keySelector);
When you use this your price-up will be working( price-down give exactly the same = the same params put inside the same function )

                        
这篇关于如何在Jquery中按属性排序Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！