使用jQuery根據孫子DIVS對DIV進行排序

儘管存在非常相似的解決方案，但我已經花了最後一天淘汰Stack並且沒有找到這個問題的答案。這是代碼，我一起工作的HTML：使用jQuery根據孫子DIVS對DIV進行排序

<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，#filesize，#filetype或#filedate div的內容的#sort專區內進行排序。

我已經使用JavaScript嘗試這樣做，也沒有工作：

<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>

來源

2012-06-06 Jeff Thomas

指定如何對它們進行排序。按文件名，文件大小，類型或日期？或者全部都是？通過某種「選擇」？請嘗試在http://fiddle.net重現環境。 –

我創建了一個這樣的小提琴：http://jsfiddle.net/K9qNm/4/ –

你忘了引用一些選擇器：'$（＃sfilename）'和其他3，但這並不能解決問題仍然。 –

使用.data()存儲在呼叫者的data開關，然後分割你的folder/file jQuery的對象來組織它，你的方式想。

Fiddle - 我正在使用data屬性來存儲order_by作爲下一個訂單，它將在點擊時應用於排序。我在最後的評論中簡化了小提琴。 =]

來源

2012-06-06 22:28:49

使用jQuery根據孫子DIVS對DIV進行排序

回答

相關問題