css - 根据属性对Div标签重新排序

在此先感谢您的帮助，我使用CSS已经有一段时间了，但是对Jquery / Javascript却一无所知。我正在创建一个旅游网站，我有一长串可供客户预订的旅游项目，但是我想要一种可以按价格和持续时间对其进行订购的方法。每个游览都在单独的div标签中。我在下面列出了代码im的简化版本。谁能告诉我是否有可能在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>

在此先感谢您的帮助！

最佳答案

这是一个相当简单的解决方案。我对您的HTML采取了一些自由措施-我将

元素包装在元素中，并在

元素中将'data-'放在结果，价格和工期属性上。

工作提琴：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);
    });

});

关于css - 根据属性对Div标签重新排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22739836/