jQuery:如何解析<ul>列表?

时间:2016-02-18 17:06:11

标签: jquery

例如,我有以下列表:

<ul class="dropdown-menu pull-right" id="dropdown-menu">
    <li><a language-id="2" language-code="de" href="#">Allemand</a></li>
    <li><a language-id="9" language-code="en" href="#">Anglais</a></li>
    <li><a language-id="28" language-code="ca" href="#">Catalan</a></li>
    <li><a language-id="11" language-code="zh" href="#">Chinois</a></li>
    <li><a language-id="4" language-code="es" href="#">Espagnol</a></li>
    <li><a language-id="1" language-code="fr" href="#">Français</a></li>
    <li><a language-id="10" language-code="nl" href="#">Hollandais</a></li>
    <li><a language-id="21" language-code="it" href="#">Italien</a></li>
    <li><a language-id="12" language-code="ja" href="#">Japonais</a></li>
    <li><a language-id="7" language-code="pl" href="#">Polonais</a></li>
    <li><a language-id="5" language-code="pt" href="#">Portugais</a></li>
    <li><a language-id="6" language-code="ru" href="#">Russe</a></li>
    <li><a language-id="29" language-code="cs" href="#">Tchèque</a></li>
</ul>

我想按字母顺序插入一种新语言。所以我知道使用insertAfter()或insertBefore(),但我没有看到如何解析列表以将新语言与列表中的每个项目进行比较。 我该怎么办?

此致

2 个答案:

答案 0 :(得分:1)

看看这个SO question: How to sort a list with jQuery

将新项目附加到列表中(此时订单并不重要)。完成后,使用array sort重新排序列表。

&#13;
&#13;
var menu = $('.dropdown-menu');

menu.append('<li><a language-id="29" language-code="cs" href="#">Tchèque</a></li>');
menu.append('<li><a language-id="6" language-code="ru" href="#">Russe</a></li>');
menu.append('<li><a language-id="5" language-code="pt" href="#">Portugais</a></li>');
menu.append('<li><a language-id="4" language-code="es" href="#">Espagnol</a></li>');
menu.append('<li><a language-id="10" language-code="nl" href="#">Hollandais</a></li>');
menu.append('<li><a language-id="12" language-code="ja" href="#">Japonais</a></li>');
menu.append('<li><a language-id="11" language-code="zh" href="#">Chinois</a></li>');
menu.append('<li><a language-id="9" language-code="en" href="#">Anglais</a></li>');
menu.append('<li><a language-id="1" language-code="fr" href="#">Français</a></li>');
menu.append('<li><a language-id="21" language-code="it" href="#">Italien</a></li>');
menu.append('<li><a language-id="2" language-code="de" href="#">Allemand</a></li>');
menu.append('<li><a language-id="7" language-code="pl" href="#">Polonais</a></li>');
menu.append('<li><a language-id="28" language-code="ca" href="#">Catalan</a></li>');

$('.dropdown-menu li').sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
.appendTo('.dropdown-menu');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu pull-right" id="dropdown-menu">
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用.each()

$('#dropdown-menu').each(function () {
   // use $(this) as an li
});

pyDNS