按范围内容订购ul清单 [英] Order ul list by span content
问题描述
我真的很迷失,因为我试图按li中的跨度排序ul列表.
I am really lost with trying to order an ul list by the span in the li.
我有下一个结构
<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的内容对列表进行排序.
I have that list generated from some uploaded videos and separated because respnse1 brings videos from X database and response brings videos from Y database. What I want to do is to order the list by the content of the SPAN in LI.
我已经尝试了Google和Stack Overflow的一些功能,但我无法根据自己的需要进行调整.
I've tried a few things from Google and Stack Overflow but I couldn't adapt any 1 to fit what I need.
就是这样,如何通过LI中SPAN的内容使用JavaScript/jQuery排序列表?
So that's it, how can I order a list with JavaScript/jQuery by the content of SPAN in LI?
推荐答案
有效!...
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);
}));
这篇关于按范围内容订购ul清单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!