Question

在此先感谢您的帮助，我一直在使用CSS一段时间，但对Jquery / Javascript没有任何线索。我正在创建一个旅游网站，我有很多旅游客户可以预订的旅行，但我想要一种可以按价格和持续时间订购的方式。每个游览都在一个单独的div标签中。我已经在下面列出了代码的简化版本。任何人都可以告诉我是否可以在div标签上方创建一组链接，这些链接将根据价格，持续时间或按字母顺序对其进行重新排序（取决于点击的链接）

<div class="result" price = "749" duration="8" Name="Basecamp">Info about tour 1 goes here</div>

<div class="result" price = "2099" duration="19" Name="Cycle Adventure">Info about tour 2 goes here</div>

<div class="result" price = "1099" duration="25"Name="Family Adventure">Info about tour 3 goes here</div>

 <div class="result" price = "3014" duration="18" Name="Luxury Basecamp">Info about tour 3 goes here</div>

提前感谢您的帮助！

Answer 1

这是一个相当简单的解决方案。我对你的HTML采取了一些自由 - 我包装了＆lt; div＆gt; ＆lt; section＆gt;中的元素元素和前置数据 - ＆＃39;转到＆lt; div＆gt;中的结果，价格和持续时间属性元件。

工作小提琴：http://jsfiddle.net/databass/Yh2L3/

HTML：

<button data-sort='price'>Sort By Price</button>
<button data-sort='duration'>Sort By Duration</button>
<button data-sort='name'>Sort By Name</button>
<section id="tours">
    <div class="result" data-price="749" data-duration="8" data-name="Basecamp">Info about tour 1 goes here</div>
    <div class="result" data-price="2099" data-duration="19" data-name="Cycle Adventure">Info about tour 2 goes here</div>
    <div class="result" data-price="1099" data-duration="25" data-name="Family Adventure">Info about tour 3 goes here</div>
    <div class="result" data-price="3014" data-duration="18" data-name="Luxury Basecamp">Info about tour 4 goes here</div>
</section>

JavaScript：

$('button').on('click', function (event) {
    var divElements = $('#tours div'),
        sortType = $(this).data('sort');

    divElements.sort(function (a, b) {

        a = $(a).data(sortType);
        b = $(b).data(sortType);

    // compare
        if (a > b) {
            return 1;
        } else if (a < b) {
            return -1;
        } else {
            return 0;
        }
    });

    $('#tours').empty();
    $.each(divElements, function (i, divElement) {
        $('#tours').append(divElement.outerHTML);
    });

});

Answer 2

有一个非常好的小JQuery插件，名为TinySort，效果很好，有很多很好的例子：

网址：http://tinysort.sjeiti.com/

转到“排序表”部分，了解如何对多个值进行排序。

根据属性重新排序Div标签

2 个答案: