根據屬性重新排列Div標籤

在此先感謝您的幫助，我一直在使用CSS，但對Jquery/Javascript沒有任何線索。我正在創建一個旅遊網站，我有一個客戶可以預訂的長途旅行列表，但是我想要一種可以按照價格和持續時間訂購的方式。每個遊覽都在一個單獨的div標籤中。我已經列出了使用下面的代碼im的簡化版本。任何人都可以讓我知道如果有可能使一組在上述的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>

預先感謝您的幫助！

來源

2014-03-30 willmadd

這是一個相當簡單的解決方案。我在你的HTML上花了一些自由 - 我在< section>元素中包裝了< div>元素，並在您的< div>元素中將'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); 
    }); 

});

來源

2014-03-30 04:03:28

有一個非常漂亮的小jQuery插件稱爲TinySort是運作良好，並有很多很好的例子：

的網址：http://tinysort.sjeiti.com/

再往排序表部分，瞭解如何將多個值進行排序。

來源

2014-03-30 03:26:17 nixkuroi

根據屬性重新排列Div標籤

回答

相關問題