Jquery - 对嵌套的ul列表进行排序

时间：2017-06-02 09:21:41

标签： javascript jquery html

我需要对以下列表进行排序：

<ul id="continenti_nazioni" class="open" style="display: block;">
    <li class="continent"><a href="javascript:open_c('Asia')" class="continent_link  Asia">Asia</a>
        <ul style="display: none;">
            <li class="nation "><a href="nation_50">Cina</a></li>
            <li class="nation "><a href="nation_35">Giappone</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Europa')" class="continent_link  Europa active">Europa</a>
        <ul style="display: block;">
            <li class="nation "><a href="#">Austria</a></li>
            <li class="nation "><a href="nation_15">Belgio</a></li>
            <li class="nation "><a href="nation_42">Republica Ceca</a></li>
            <li class="nation "><a href="nation_32">Francia</a></li>
            <li class="nation "><a href="nation_37">Germany</a></li>
            <li class="nation "><a href="nation_40">Olanda</a></li>
            <li class="nation "><a href="nation_41">Portogallo</a></li>
            <li class="nation "><a href="nation_43">Russia</a></li>
            <li class="nation "><a href="nation_44">Spagna</a></li>
            <li class="nation "><a href="nation_36">Svizzera</a></li>
            <li class="nation "><a href="nation_38">Regno Unito</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Medio-Oriente')" class="continent_link  Medio-Oriente">Medio Oriente</a>
        <ul>
            <li class="nation ">
                <a href="nation_47"></a>
            </li>
            <li class="nation "><a href="nation_46">Bahrain</a></li>
            <li class="nation "><a href="nation_48">Qatar</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Nord-America')" class="continent_link  Nord-America">Nord America</a>
        <ul>
            <li class="nation "><a href="nation_16">USA</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Pan-Regional')" class="continent_link  Pan-Regional">Pan Regional</a>
        <ul>
            <li class="nation "><a href="nation_33">Globale</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Sud-America')" class="continent_link  Sud-America">Sud America</a>
        <ul>
            <li class="nation "><a href="nation_31">Brasile</a></li>
        </ul>
    </li>
</ul>

我正在使用以下js：

function sortUl(selector) {
    var mylist = jQuery(selector);
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase());
    })
    jQuery.each(listitems, function(idx, itm) { mylist.append(itm); });
}
jQuery(document).ready(function () {
    sortUl('#continenti_nazioni');
    sortUl('#continenti_nazioni > li > ul');
});

它适用于ul的第一级，但是当我尝试排序第二级时，列表会被破坏。 我是否可以做一些事情来使该功能也适用于嵌套ul？

修改 

function sortUl(mylist) {
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase());
    })
    jQuery.each(listitems, function(idx, itm) { mylist.append(itm); });
}
jQuery(document).ready(function () {
    sortUl(jQuery('.nazioni'));
    sortUl(jQuery('#filter_archive'));
    jQuery('#filter_archive > li > ul').each(function () {
      sortUl(jQuery(this));
    }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul class="nazioni">
        <li><a href="#">Russia</a></li>
        <li><a href="#">Spagna</a></li>
        <li><a href="#">Svizzera</a></li>
        <li><a href="#">Austria</a></li>
        <li><a href="#">Belgio</a></li>
        <li><a href="#">Francia</a></li>
        <li><a href="#">Germany</a></li>
        <li><a href="#">Olanda</a></li>
        <li><a href="#">Portogallo</a></li>
        <li><a href="#">Regno Unito</a></li>
        <li><a href="#">Republica Ceca</a></li>
    </ul>
    
<ul id="continenti_nazioni" class="open" style="display: block;">
    <li class="continent"><a href="javascript:open_c('Asia')" class="continent_link  Asia">Asia</a>
        <ul style="display: none;">
            <li class="nation "><a href="nation_50">Cina</a></li>
            <li class="nation "><a href="nation_35">Giappone</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Europa')" class="continent_link  Europa active">Europa</a>
        <ul style="display: block;">
            <li class="nation "><a href="#">Austria</a></li>
            <li class="nation "><a href="nation_15">Belgio</a></li>
            <li class="nation "><a href="nation_42">Republica Ceca</a></li>
            <li class="nation "><a href="nation_32">Francia</a></li>
            <li class="nation "><a href="nation_37">Germany</a></li>
            <li class="nation "><a href="nation_40">Olanda</a></li>
            <li class="nation "><a href="nation_41">Portogallo</a></li>
            <li class="nation "><a href="nation_43">Russia</a></li>
            <li class="nation "><a href="nation_44">Spagna</a></li>
            <li class="nation "><a href="nation_36">Svizzera</a></li>
            <li class="nation "><a href="nation_38">Regno Unito</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Medio-Oriente')" class="continent_link  Medio-Oriente">Medio Oriente</a>
        <ul>
            <li class="nation ">
                <a href="nation_47"></a>
            </li>
            <li class="nation "><a href="nation_46">Bahrain</a></li>
            <li class="nation "><a href="nation_48">Qatar</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Nord-America')" class="continent_link  Nord-America">Nord America</a>
        <ul>
            <li class="nation "><a href="nation_16">USA</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Pan-Regional')" class="continent_link  Pan-Regional">Pan Regional</a>
        <ul>
            <li class="nation "><a href="nation_33">Globale</a></li>
        </ul>
    </li>
    <li class="continent"><a href="javascript:open_c('Sud-America')" class="continent_link  Sud-America">Sud America</a>
        <ul>
            <li class="nation "><a href="nation_31">Brasile</a></li>
        </ul>
    </li>
</ul>

2 个答案:

答案 0 :(得分：2)

由于sortUl('#continenti_nazioni > li > ul'); 会在#continenti_nazioni中返回所有ul的数组。var mylist = jQuery(selector);将返回#continenti_nazioni中的所有li。

你们每个人li排序并附加到所有ul

替换为

＆＃13;
＆＃13; 
function sortUl(mylist) {
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase());
    })
    jQuery.each(listitems, function(idx, itm) {
        mylist.append(itm);
       // check current item has ul and sort child
        if(jQuery(itm).children('ul').length){
          sortUl(jQuery(itm).children('ul'));
       }
   });
}
jQuery(document).ready(function () {
    sortUl($('#nazioni_continenti'));
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nazioni_continenti" class="open" style="display: block;">
<li class="continent"><a href="javascript:open_c('Asia')" class="continent_link  Asia">Asia</a>
    <ul style="display: none;">
        <li class="nation "><a href="nation_50">Cina</a></li>
        <li class="nation "><a href="nation_35">Giappone</a></li>
    </ul>
</li>
<li class="continent"><a href="javascript:open_c('Europa')" class="continent_link  Europa active">Europa</a>
    <ul style="display: block;">
        <li class="nation "><a href="#">Austria</a></li>
        <li class="nation "><a href="nation_15">Belgio</a></li>
        <li class="nation "><a href="nation_42">Republica Ceca</a></li>
        <li class="nation "><a href="nation_32">Francia</a></li>
        <li class="nation "><a href="nation_37">Germany</a></li>
        <li class="nation "><a href="nation_40">Olanda</a></li>
        <li class="nation "><a href="nation_41">Portogallo</a></li>
        <li class="nation "><a href="nation_43">Russia</a></li>
        <li class="nation "><a href="nation_44">Spagna</a></li>
        <li class="nation "><a href="nation_36">Svizzera</a></li>
        <li class="nation "><a href="nation_38">Regno Unito</a></li>
    </ul>
</li>
<li class="continent"><a href="javascript:open_c('Medio-Oriente')" class="continent_link  Medio-Oriente">Medio Oriente</a>
    <ul>
        <li class="nation ">
            <a href="nation_47"></a>
        </li>
        <li class="nation "><a href="nation_46">Bahrain</a></li>
        <li class="nation "><a href="nation_48">Qatar</a></li>
    </ul>
</li>
<li class="continent"><a href="javascript:open_c('Nord-America')" class="continent_link  Nord-America">Nord America</a>
    <ul>
        <li class="nation "><a href="nation_16">USA</a></li>
    </ul>
</li>
<li class="continent"><a href="javascript:open_c('Pan-Regional')" class="continent_link  Pan-Regional">Pan Regional</a>
    <ul>
        <li class="nation "><a href="nation_33">Globale</a></li>
    </ul>
</li>
<li class="continent"><a href="javascript:open_c('Sud-America')" class="continent_link  Sud-America">Sud America</a>
    <ul>
        <li class="nation "><a href="nation_31">Brasile</a></li>
    </ul>
</li>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

这是一个解决方案：

function sortUl(mylist) {
    var listitems = mylist.children('li').get();
    listitems.sort(function(a, b) {
        return jQuery(a).text().toUpperCase().localeCompare(jQuery(b).text().toUpperCase());
    })
    jQuery.each(listitems, function(idx, itm) { mylist.append(itm); });
}
jQuery(document).ready(function () {
    sortUl($('#continenti_nazioni'));
    $('#continenti_nazioni > li > ul').each(function () {
      sortUl($(this));
    });
});

我将jQuery ul传递给函数而不是选择器，然后分别为每个内部ul调用sort方法。

相关问题
最新问题