jQuery按升序和降序排序(不是表格)

Question

我正在尝试按价格和评级对结果列表进行排序.为简单起见,我刚刚收到了2个结果:Rider's Lodge和Olina Lodge.我编写了一个以单向排序的函数.

如何重新使用相同的功能对结果进行排序,以便单击"按价格排序"按升序排序,再次单击它按降序排序并在两者之间切换？

<div class="tab-content">
    <div id="filters">
        <p>
            <a href="javascript:sort_by_rating();">Sort by Rating</a>
            <br>
            <a href="javascript:sort_by_price();">Sort by Price</a>
        </p>
    </div>


    <div id="div_hotel_results" class="tab-pane active">
        <form id="hotel-form">
        ...
        </form>
        <div class="results-row">
            <h5>Riders Lodge</h5>
            <span class="label label-info price">$103.64</span>
            <span class="rating" data-rating="3.0">3.0</span>
        </div>

        <div class="results-row">
            <h5>Olina Lodge</h5>
            <span class="label label-info price">$99.64</span>
            <span class="rating" data-rating="2.5">2.5</span>
        </div>
    </div>
</div>

<script type="text/javascript">
function sort_by_price () {
    var sorted_list = [];
    $('.price').each(function (index) {
        sorted_list[index] = $(this).parent().parent().remove();
        sorted_list[index]['cleaned_price'] = parseFloat($(this).text().replace(/[^0-9\.]+/g,""));
    });

    sorted_list.sort(function (a, b) {
        if (a['cleaned_price'] == b['cleaned_price']) {
            return 0;
        } else if (a['cleaned_price'] > b['cleaned_price']) {
            return 1;
        } else {
            return -1;
        }
    });

    $('#hotel-form').after(sorted_list);
}
</script>

Answer 1

这是一个例子.我相信你只想要价格,而不是评级.我创建了一个变量,可以帮助跟踪排序的当前状态.然后根据它对上升/下降进行排序.

我还在html之外移动了你的事件绑定.

工作演示

HTML:

<div class="tab-content">
    <div id="filters">
        <p>
            <a class="sortByRating" href="#" >Sort by Rating</a>
            <br>
            <a class="sortByPrice" href="#">Sort by Price</a>
        </p>
    </div>


    <div id="div_hotel_results" class="tab-pane active">
        <form id="hotel-form">
        ...
        </form>
        <div class="results">
            <div class="results-row">
                <h5>Riders Lodge</h5>
                <span class="label label-info price">$103.64</span>
                <span class="rating" data-rating="3.0">3.0</span>
            </div>

            <div class="results-row">
                <h5>Olina Lodge</h5>
                <span class="label label-info price">$99.64</span>
                <span class="rating" data-rating="2.5">2.5</span>
            </div>
        </div>
    </div>
</div>

使用Javascript:

var ascending = false;

$('.tab-content').on('click','.sortByPrice',function(){

    var sorted = $('.results-row').sort(function(a,b){
        return (ascending ==
               (convertToNumber($(a).find('.price').html()) < 
                convertToNumber($(b).find('.price').html()))) ? 1 : -1;
    });
    ascending = ascending ? false : true;

    $('.results').html(sorted);
});

var convertToNumber = function(value){
     return parseFloat(value.replace('$',''));
}