Jquery/TinySort轉移整個DIV容器

Question

我想設置一個非常簡單的方法來分類內容。我發現TinySort，它似乎能夠完成這項工作，但是我需要排序來移動整個容器div，而不是重新排列內容。

本質上，我設置了激活排序功能的鏈接，他們正在對我尋找的跨度進行排序，但它會在包含它們的div內移動跨度。

我構建了一個簡單的JSFIDDLE來顯示我的掙扎。 https://jsfiddle.net/og6jfLjf/

當您按價格排序價格移動並按順序排列時，但是他們並未將它們拉出來。他們只是在每個容器內移動。

$(document).ready(function() { 
 
    $(".price-sort").click(function() { 
 
     tinysort("span.price"); 
 
    }); 
 
    $(".title-sort").click(function() { 
 
     tinysort("span.title"); 
 
    }); 
 
});

div{ 
 
    width: 100px; 
 
    height:100px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    margin:10px; 
 
} 
 
#div1{ 
 
    background-color:#666; 
 
} 
 
#div4{ 
 
    background-color:#aaa; 
 
} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script> 
 
<div id="div4"><span class="title">Title 1</span> - $<span class="price">5</span></div> 
 
<div id="div1"><span class="title">Title 3</span> - $<span class="price">4</span></div> 
 
<div id="div2"><span class="title">Title 2</span> - $<span class="price">6</span></div> 
 

 
<a href="#" class="price-sort">Sort By Price</a> | 
 
<a href="#" class="title-sort">Sort By Title</a> |

Answer 1

解決的問題。我沒有告訴函數包含div。所以我調整了腳本，根據其中的跨度對div進行排序。這是一個可用的JSFIDDLE來顯示它。

https://jsfiddle.net/oym96zL5/

$(document).ready(function() { 
$(".price-sort").click(function() { 
    tinysort('div','span.price'); 
}); 
$(".title-sort").click(function() { 
    tinysort('div','span.title'); 
}); 

}）;

Answer 2

您可以製作一張表格，如果您有大量數據，則會更容易。點擊「Item」標題和「Price」標題對行進行排序。

$(document).ready(function() { 
 
    var table = document.getElementById('xtable'), 
 
    tableHead = table.querySelector('thead'), 
 
    tableHeaders = tableHead.querySelectorAll('th'), 
 
    tableBody = table.querySelector('tbody'); 
 

 
    tableHead.addEventListener('click', function(e) { 
 
    var tableHeader = e.target, 
 
     textContent = tableHeader.textContent, 
 
     tableHeaderIndex, isAscending, order; 
 

 
    if (textContent !== 'add row') { 
 
     while (tableHeader.nodeName !== 'TH') { 
 
     tableHeader = tableHeader.parentNode; 
 
     } 
 
     tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader); 
 
     isAscending = tableHeader.getAttribute('data-order') === 'asc'; 
 
     order = isAscending ? 'desc' : 'asc'; 
 
     tableHeader.setAttribute('data-order', order); 
 
     tinysort(tableBody.querySelectorAll('tr'), { 
 
     selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')', 
 
     order: order 
 
     }); 
 
    } 
 
    }); 
 
});

table.blue { 
 
    padding: 0; 
 
    box-shadow: 0 1px 9px 1px #ccc; 
 
    border-radius: 6px; 
 
    margin: 20px auto; 
 
} 
 
.blue th { 
 
    color: #FFF; 
 
    background: #2C7EDB; 
 
    padding: 10px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.blue tr:nth-child(odd) { 
 
    background-color: #333; 
 
    color: #FFF; 
 
} 
 
.blue tr:nth-child(even) { 
 
    background-color: #D3E9FF; 
 
    color: #333; 
 
} 
 
.blue td { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #264D73; 
 
    padding: 5px; 
 
    text-align: left; 
 
    vertical-align: top; 
 
} 
 
.blue thead th:first-child { 
 
    border-top-left-radius: 6px; 
 
} 
 
.blue thead th:last-child { 
 
    border-top-right-radius: 6px; 
 
} 
 
.blue tbody tr:last-child th:first-child { 
 
    border-bottom-left-radius: 6px; 
 
} 
 
.blue tbody tr:last-child td:first-child { 
 
    border-bottom-left-radius: 6px; 
 
} 
 
.blue tbody tr:last-child td:last-child { 
 
    border-bottom-right-radius: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script> 
 
<table class="blue" id="xtable"> 
 
    <thead> 
 
    <tr> 
 
     <th data-order="asc"> 
 
     <a>Item 
 
      </a> 
 
      </th> 
 
      <th>Qty 
 
       </th> 
 
       <th data-order="asc"><a>Price</a> </th> 
 
      <th>Desc</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> <td> Porche </td><td>1</td> <td> $100, 000.00 </td><td>Sports car</td> </tr> 
 
     <tr><td>Toilet Paper</td> <td> 5 </td><td>$50.00</td> <td> 8 rolls </td></tr> 
 
    <tr> <td> Laptop </td><td>1</td> <td> $600.00 </td><td>HP i7 12GB 1TB</td> </tr> 
 
    </tbody> 
 
    </table>