jQuery的 - 排序嵌套UL列表

Question

我需要理清以下列表：

<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>

Answer 1

这里有一个解决方案：

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的排序方法。

Answer 2

因为sortUl('#continenti_nazioni > li > ul'); 返回的数组中#continenti_nazioni。而var mylist = jQuery(selector);所有UL将返回所有李时珍在#continenti_nazioni。

您每次都li排序，并追加到所有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); 
 
     // 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')); 
 
});

<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>