How to Sort Div by attribute in Jquery

Question

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?

Adeptus · Accepted Answer · 2013-11-15 10:44:29Z

2

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 )

answered Nov 15, 2013 at 10:44

Adeptus

6833 silver badges6 bronze badges

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

5 Comments

patel.milanb Over a year ago

i think you got me there .... something is working ..BUT because i have a decimal in price... its still not sorting it perfectly...

Adeptus Over a year ago

you can use javascript parseFloat function

patel.milanb Over a year ago

got it.... prices are working fine BUT then how to sort by data-isfeatured and data-isnew... same function is not working for those two

Adeptus Over a year ago

selector .ProductList:visible maybe not workig but easy use .filter-enable and will be the same right?

patel.milanb Over a year ago

yes...i can use .filter-enable instead of .ProductList:visible

mplungjan · Accepted Answer · 2018-06-02 11:03:11Z

1

You need to convert strings to floats before sorting by price.

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

As @Adeptus pointed out keySelector got to be without data- prefix. `

edited Jun 2, 2018 at 11:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Nov 15, 2013 at 11:19

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

1 Comment

Adeptus Over a year ago

.data(keySelector) will be not working here because param is "data-price". will be work when change param to "price":)

Collectives™ on Stack Overflow

How to Sort Div by attribute in Jquery

DIV Structure

SORT-Criteria

Jquery Code got so far

ERROR

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

DIV Structure

SORT-Criteria

Jquery Code got so far

ERROR

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related