我正在寻找一种使用标准javascript或jQuery对相当复杂的html无序列表进行排序的方法。
请查看HTML,订单需要按字母顺序排列,并且基于".keywordType span value"
内的HTML,但需要构建顶级li的顺序(使用唯一的keyword_xxx)。我刚刚粘贴了几十个列表项中的两个。
<ul class="keywords">
<li id="keyword_185">
<div class="icon_keyword"></div>
<input type="hidden" class="keywordLabel" value="More opening hours">
<div class="data-wrapper">
<div class="keywordType">
<span class="oh">Payment methods</span>
</div>
<div class="keywordValue">
<span id="keyword_185" class="oh">Credit Card, PayPal</span>
</div>
</div>
<a class="edit" title="Edit keywords"></a>
<a class="delete" title="Delete keywords"></a>
</li>
<li id="keyword_192">
<div class="icon_keyword"></div>
<input type="hidden" class="keywordLabel" value="Monday to Friday: 8:30am to 6:30pm Saturday: 9pm to 6:30pm Sunday: 10 - 4pm">
<div class="data-wrapper">
<div class="keywordType">
<span class="oh">Opening Hours</span>
</div>
<div class="keywordValue">
<span id="keyword_192" class="oh">Monday to Friday: 8:30am to 6:30pm<br>Saturday: 9pm to 6:30pm<br>Sunday: 10 - 4pm</span>
</div>
</div>
<a class="edit" title="Edit keywords"></a>
<a class="delete" title="Delete keywords"></a>
</li>
</ul>
由于
答案 0 :(得分:4)
var list = $('ul.keywords');
var listItems = $('li', list);
listItems.sort(function (a, b) {
return $(a).text() > $(b).text() ? 1 : -1;
});
list.append(listItems);
您可以sort
元素列表(jQuery对象具有Array
的所有方法,包括Array.prototype.sort
)。
在比较功能中,只需比较列表项的文本内容。随后将根据字母表中的位置(实际上是Unicode表格)比较单个字母。例如,k > a
为true
。
最后,只需将项目重新附加到列表中即可。
答案 1 :(得分:2)
答案 2 :(得分:0)
这有帮助吗?
var arr;
$('.keyword span').each( function( i, el){
arr[i] = $(el).text();
});
arr.sort();
我在这个问题页面上进行了测试,下面的代码在右侧列出相关问题列表。
var arr;
$('.question-hyperlink').each( function( i, el){
arr[i] = $(el).text();
});
arr.sort();