2011-12-23 70 views
2

我真的迷失了試圖按李量程排列ul列表。按量程內容排列ul列表

我有這樣的一個結構

<ul id="videosList"> 
<li class="response1"><a href="link"><img src="moon" /><span>Alex breaking bad</span><li> 
<li class="response1"><a href="link"><img src="moon" /><span>Jason playing piano</span><li> 
<li class="response1"><a href="link"><img src="moon" /><span>Jenny skying</span><li> 
<li class="response1"><a href="link"><img src="moon" /><span>Chuck norris</span><li> 
<li class="response1"><a href="link"><img src="moon" /><span>Zyxwaa</span><li> 
<li class="response1"><a href="link"><img src="moon" /><span>Realtek</span><li> 

<li class="response2"><a href="link"><img src="moon" /><span>Bad alex breaking</span><li> 
<li class="response2"><a href="link"><img src="moon" /><span>Piano playing Jason</span><li> 
<li class="response2"><a href="link"><img src="moon" /><span>Skying Jenny</span><li> 
<li class="response2"><a href="link"><img src="moon" /><span>Norris chuck</span><li> 
<li class="response2"><a href="link"><img src="moon" /><span>Intel</span><li> 
</ul> 

我有一些上傳視頻生成和分隔的列表中,因爲respnse1從X數據庫帶來的視頻和響應Y的數據庫帶來的視頻。我想要做的是按照LI中SPAN的內容排序列表。

我已經嘗試了一些谷歌和stackoverflow的東西,但我無法適應任何1,以適應我需要的東西。

這就是這樣,我怎麼可以通過在LI中的SPAN的內容來命令與JavaScript/jQuery的列表?

+1

你有兩個視頻數據庫的原始JavaScript數組?在生成HTML之前合併和排序它們會更好。 – Yogu 2011-12-23 18:05:23

+0

你想如何按字母順序排列它們? – 2011-12-23 18:05:55

+1

好吧,我使用Codeigniter框架,所以當我將數據發送到視圖我發送它作爲一個數組($ contentData)這是一個多維數組(['response1'],['response2'] ...和每一個與它的數據,我做的是每個響應的foreach,並回應李的數據。是的,我認爲按字母順序排列是一個好主意。 – Alex 2011-12-23 18:10:01

回答

2

它的作品!......

var list = $("ul#videosList"); 
var desc= false; 
list.append(list.children().get().sort(function(a, b) { 
    var aProp = $(a).find("span").text(), 
     bProp = $(b).find("span").text(); 
    return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1); 
})); 
+0

是的先生,它工作的很好。你非常喜歡! – Alex 2011-12-23 18:21:47

+0

沒問題,歡呼聲... – 2011-12-23 18:23:38

+1

+1原生jQuery – Yogu 2011-12-23 18:28:34

0

如果您使用的是jQuery,請參閱this extension,它可以幫助您使用自定義比較器函數對DOM元素進行排序。它的工作原理是這樣的:

$('#videosList').sortElements(function(a, b){ 
    return $(a).text() > $(b).text() ? 1 : -1; 
}); 

然後,列表項目按字母順序排序。

+0

謝謝你的回答你,它沒有工作,因爲我得到.sortElements它不是一個函數 – Alex 2011-12-23 18:23:32

+0

您是否同時包含jQuery和鏈接的擴展? – Yogu 2011-12-23 18:28:04

+1

哦,大聲笑,我錯過了那部分!大聲笑,謝謝任何方式,但鹽的答案適合我。 – Alex 2011-12-23 18:41:57