Javascript 如何通过单个列表元素对div应用表头排序？

我正在从外部查询动态创建一系列

。使用Javascript创建

，并使用单独的列表元素填充。结构类似于：

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

搜索框在keyUp上运行jQuery livefilter，隐藏与搜索不匹配的

s

然后，我希望能够通过单击表头对可见div进行排序，这些表头处理

中的单个

元素（日期、名称等）。我曾尝试使用tablesorter，并将每个

放入
中，但桌面最终位于身体下方，无法工作

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


 
每当你遇到这种情况时，你必须根据数据变化渲染一些东西，请考虑数据和视图层之间的解耦。因为您的视图必须根据数据更改而更改。您可以自己实现这种逻辑，也可以使用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>

按以下方式对数据排序：









2012年
乔


2013年
戴夫


2013年
亚当·布朗


功能分类（arr、prop、asc）
{
arr=arr.sort（函数（a，b）
{
如果（asc）
{
返回（a[prop]>b[prop]）；
}
其他的
{
返回（b[prop]>a[prop]）；
}
});
返回arr；
}
$（文档）.ready（函数（）
{
var recordDiv=$（'#records'）、dataDivs=$（'#records div'）、data=[]，sortLink=$（'a'）；
for（var i=0，len=dataDivs.length；i

让我们知道进展情况。：）
 只是一个侧面不是，ID不能以数字开头O@JamieHutber…除非HTML5文档…@JamieHutber好的，他们目前没有做任何事情，但我想我需要他们来对div进行排序。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;
    });
});