使用jQuery根据Grandchild DIVS对DIV进行排序 [英] Use jQuery to Sort DIV based on Grandchild DIVS

问题描述

我花了最后一天淘到堆栈，并没有找到这个问题的答案，即使有非常类似的解决方案。这是我正在使用的HTML代码：

I have spent the last day scouring Stack and have not found the answer to this problem, even though there are very similar solutions. This is the code the HTML that I am working with:

<div class="titles">
    <div class="filename" id="sfilename"><strong>Name</strong></div>
    <div class="filesize" id="sfilesize"><strong>Size</strong></div>
    <div class="filetype" id="sfiletype"><strong>Type</strong></div>
    <div class="filedate" id="sfiledate"><strong>Last Modified</strong></div>
</div>

<div id="sort">
    <div class="folder">
        <div class="filename">Folder 1</div>
    <div class="filesize">&nbsp;</div>
        <div class="filetype">&nbsp;</div>
        <div class="filedate">May 12 2012 11:24:44 AM</div>
    </div>
    <div class="folder">
        <div class="filename">Folder 2</div>
    <div class="filesize">&nbsp;</div>
        <div class="filetype">&nbsp;</div>
        <div class="filedate">May 15 2012 09:24:44 AM</div>
    </div>
    <div class="folder">
        <div class="filename">Folder 3</div>
    <div class="filesize">&nbsp;</div>
        <div class="filetype">&nbsp;</div>
        <div class="filedate">May 18 2012 12:24:44 AM</div>
    </div>

    <div class="file">
        <div class="filename">File 1</div>
    <div class="filesize">7.38 Kb</div>
        <div class="filetype">png</div>
        <div class="filedate">May 18 2012 08:24:44 AM</div>
    </div>
    <div class="file">
        <div class="filename">File 2</div>
    <div class="filesize">58.2 Kb</div>
        <div class="filetype">jpg</div>
        <div class="filedate">May 16 2012 07:24:44 AM</div>
    </div>
    <div class="file">
        <div class="filename">File 3</div>
    <div class="filesize">135.87 Kb</div>
        <div class="filetype">mov</div>
        <div class="filedate">May 10 2012 05:24:44 AM</div>
    </div>

</div>

我希望能够根据#filename的内容对#sort div进行排序， #filesize，#filetype或#filedate div's。

I want to be able to sort within the #sort div based on the contents of the #filename, #filesize, #filetype or #filedate div's.

我已经用Javascript试过了，并且它不工作：

I have already tried this with Javascript and it did not work:

<script type="text/javascript">
function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

$('#sfilename').data("sortKey", "#filename");
$('#sfilesize').data("sortKey", "#filesize");
$('#sfiletype').data("sortKey", "#filetype");
$('#sfiledate').data("sortKey", "#filedate");

$("#sfilename").click(function() {
   sortUsingNestedText($('#sort'), "div", $("#sfilename").data("sortKey"));
});

$("#sfilesize").click(function() {
   sortUsingNestedText($('#sort'), "div", $("#sfilesize").data("sortKey"));
});

$("#sfiletype").click(function() {
   sortUsingNestedText($('#sort'), "div", $("#sfiletype").data("sortKey"));
});

$("#sfiledate").click(function() {
   sortUsingNestedText($('#sort'), "div", $("#sfiledate").data("sortKey"));
});

</script>

推荐答案

使用 .data（） 在调用者的数据中存储交换机，然后拆分你的文件夹 / file jQuery对象以按照你想要的方式进行组织。

Use .data() to store a switch in the callers' data, then split your folder/file jQuery objects to organize it the way you want.

小提琴 - 我使用data属性来存储 order_by 作为下一个订单，它将在点击时应用于排序。我在最后的评论中简化了小提琴。 =]

Fiddle - I'm using the data property to store order_by as the next order it will apply to the sorting when clicked. I simplified the fiddle a little more than in the last comment as well. =]

这篇关于使用jQuery根据Grandchild DIVS对DIV进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！