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の最初のレベルのために正常に動作しますしかし、私が2番目のレベルをソートしようとすると、リストが壊れてしまいます。 この機能をネストされたulのためにも機能させることができると思いますか？

EDIT

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

に置き換え、すべての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($('#continenti_nazioni')); 
    $('#continenti_nazioni > li > ul').each(function() { 
     sortUl($(this)); 
    }); 
}); 

は、私はjQueryのを渡していますulをセレクタの代わりに関数に追加し、次に各内部のソートメソッドを呼び出しますul。

Answer 2

sortUl('#continenti_nazioni > li > ul'); 戻り配列は#continenti_nazioni .AND var mylist = jQuery(selector);内のすべてのULは#continenti_nazioni内のすべてのLiを返しますので。

あなた各すべてliソートと

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>