Question

我有一个相对复杂的列表用作产品比较表，并且需要列表可以按每个列表项排序各种属性。看起来这应该很简单，但我还没有能够得到任何工作。

所以我有这样的事情：

<ul id="myList">

   <li id="item1">
     <div class="myListTitle">Item 1</div>
     <div class="myListPrice">
       <span class="currency">£</span><span class="digits">12.45</span></div>
     <div class="myListFirstFeature">456</div>
     <div class="myListLastFeature"><span class="digits">36</span> options</div>
   </li>

   <li id="item2">
     <div class="myListTitle">Item 2</div>
     <div class="myListPrice">
       <span class="currency">£</span><span class="digits">9.30</span></div>
     <div class="myListFirstFeature">241</div>
     <div class="myListLastFeature"><span class="digits">12</span> options</div>
   </li>

    <li id="item3">
     <div class="myListTitle">Item 3</div>
     <div class="myListPrice">
       <span class="currency">£</span><span class="digits">17.25</span></div>
     <div class="myListFirstFeature">842</div>
     <div class="myListLastFeature"><span class="digits">64</span> options</div>
   </li>  </ul>

等

然后我希望有按钮按各种属性排序列表，即

<button id="orderByPrice">Price</button>
<button id="orderByFirstFeature">1st Feature</button>
<button id="orderByLastFeature">Last Feature</button>

我希望这是有道理的。任何帮助非常感谢。

由于

Answer 1

您可以使用sort()来实现此目的。通过为该方法提供函数，您可以定义要排序的逻辑。如果在按钮上包含data-*属性以确定要尝试排序的内容，则可以在该函数中使用switch语句来查找要排序的值。试试这个：

$('.sort').click(function() {
  sortLi($(this).data('order'));
});

function sortLi(order) {
  var fieldClass = order == 'price' ? '.myListPrice .digits' : order == 'first-feature' ? '.myListFirstFeature' : '.myListLastFeature .digits';
  $('#myList li').sort(function(a, b) {
    var aValue = parseFloat($(a).find(fieldClass).text());
    var bValue = parseFloat($(b).find(fieldClass).text());
    if (aValue > bValue)
      return 1;
    if (aValue < bValue)
      return -1;
    return 0;
  }).appendTo('#myList');
}

Example fiddle

More information on sort() at MDN

jQuery按div / span内容排序列表多种方式

1 个答案: