Sorting by several data

Question

I'm trying to sort a list of divs from several factors, I've changed the code to be more simple, yet I still don't get the desired result.

I want to be able to sort my products on several "scores" and also name. I've only been able to make it sort by one score. I would like to sort the divs by the two different data sets.

Can anyone see what I'm doing wrong?

jQuery:

$(document).ready(function () {

    $(".product-box").show();

    $('#sortScore').click(function () {
        var sortVar = "score";

        var divList = $(".product-box");
        divList.sort(function (a, b) {
            return $(b).data(sortVar) - $(a).data(sortVar)
        });

        $(".wrapper").html(divList);
    });

    $('#sortName').click(function () {
        var sortVar = "name";

        var divList = $(".product-box");
        divList.sort(function (a, b) {
            return $(b).data(sortVar) - $(a).data(sortVar)
        });

        $(".wrapper").html(divList);
    });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sortScore'>Score</div>
<div id='sortName'>Name</div>
<div class='wrapper'>
    <div class='product-box' style='height:100px; width:100px; float:left;' data-name='Product 1' data-score='1.26'>
        <p class='productInfo' style='float:left;'> 
            <strong>Product 1</strong>
            <br />Score: 1.26</p>
    </div>
    
     <div class='product-box' style='height:100px; width:100px; float:left;' data-name='Another Product' data-score='5.43'>
        <p class='productInfo' style='float:left;'> 
            <strong>Another Product</strong>
            <br />Score: 5.43</p>
    </div>
    
     <div class='product-box' style='height:100px; width:100px; float:left;' data-name='Serious Product' data-score='-1.87'>
        <p class='productInfo' style='float:left;'> 
            <strong>Serious Product</strong>
            <br />Score: -1.87</p>
    </div>
    
     <div class='product-box' style='height:100px; width:100px; float:left;' data-name='Is this your product?' data-score='3.33'>
        <p class='productInfo' style='float:left;'> 
            <strong>Is this your product?</strong>
            <br />Score: 3.33</p>
    </div>
    
     <div class='product-box' style='height:100px; width:100px; float:left;' data-name='A Product' data-score='0.25'>
        <p class='productInfo' style='float:left;'> 
            <strong>A Product</strong>
            <br />0.25</p>
    </div>

You need to amend your sorting logic so that if the primary sort fields are equal you then sort by the secondary field. Also, `name` is a string, so you cannot subtract one value from another. — Rory McCrossan, Mar 18 '15 at 14:07

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Sorting by score seems to work. The problem is when you sort by name:

divList.sort(function (a, b) {
    return $(b).data(sortVar) - $(a).data(sortVar)
});

...This fails because you can't subtract one string from another.

Try with string comparison:

divList.sort(function (a, b) {
    return $(a).data(sortVar).localeCompare($(b).data(sortVar))
}

edited May 23 '17 at 11:44

Community

1
1

answered Mar 18 '15 at 14:13

Shai

7,159
3
19
22

Sorting by several data

1 Answers1