javascript - 如何通过单个列表元素将表头排序应用于 div？

Question

我正在创建一系列 <div> s 动态地来自外部查询。使用 Javascript <div>使用单独的列表元素创建和填充。结构类似于:

<div class="container" id="1">
    <li class="date"> </li>
    <li class="name"> </li>
<div>

搜索框在隐藏 <div> 的 keyUp 上运行 jQuery 实时过滤器与搜索不匹配的 s。

然后我希望能够通过单击针对个人 <li> 的表格标题对可见的 div 进行排序<div> 中的元素(日期、姓名等)。我试过使用 tablesorter 并将每个 <li>在<td>但 table 头最终位于主体下方，无法正常工作。

如何只对当前可见的列表元素进行排序，而对整个 div 进行排序？

JSFiddle of live filter with non operational header.

Answer 1

每当你遇到这种需要根据数据变化来渲染某些东西的情况时，请考虑数据和 View 层之间的解耦。因为您的 View 必须根据数据更改而更改。您可以自己实现这种逻辑，也可以使用 Angular.js、Backbone.js、Ember.js 等框架来解决此类问题。那么在你的情况下，有几种方法可以解决你的问题，但就像我之前说的那样，去耦会更好(我认为)。你可以做类似的事情

修改后的 HTML(便于数据提取)。您可以保留原始 HTML，但必须更改提取数据的逻辑。

Sort data by:
<a href="#">Date</a>&nbsp;<a href="#">Name</a>
<br />
<br />
<form id="live-search" action="" class="styled" method="post">
<fieldset>
    <input type="text" class="text-input" id="filter" value="Date" />
    <br />
    <input type="text" class="text-input" id="filter2" value="Name" />
    <br /> <span id="filter-count"></span>

</fieldset>
</form>
<ul class="records2" id="records">
<div data-record='{"year": "2012","name":"Joe"}'>
    <li>2012</li>
    <li>Joe</li>     
</div>
<br />
<div data-record='{"year": "2013","name":"Dave"}'>
    <li>2013</li>
    <li>Dave</li>

</div>
<br />
<div data-record='{"year":"2013","name":"Adam Brown"}'>
    <li>2013</li>
    <li>Adam Brown</li>  
</div>

function sortArray(arr, prop, asc) 
{
    arr = arr.sort(function(a, b) 
    {
        if (asc)
        {
            return (a[prop] > b[prop]);
        }
        else 
        {
            return (b[prop] > a[prop]);
        }
    });
    return arr;
}

$(document).ready(function () 
{
    var recordDiv = $('#records'), dataDivs = $('#records div'), data = [], sortLink = $('a');
    for (var i = 0, len = dataDivs.length; i < len; i++) 
    {
        var t = $(dataDivs[i]).attr('data-record');
        t = $.parseJSON(t);
        data.push(t);
    }
    sortLink.click(function()
    {
        var sortBy = this.innerHTML.toLowerCase();
        data = sortArray(data, sortBy, true);
        //Now render the element inside #record DIV as per sorted data
        return false;
    });
});

让我们知道进展如何。 :)