将网页无序列表反向排序---JavaScript--解决思路

    xiaoxiao2022-07-07  214

    思路:先获取ulNames的innerHTML,删除html开头的空字符li和结尾的/li空字符,将html按/li空字符li切割保存为names数组中

    <button onclick="nameSort()">对名字排序</button> <ul id="ulNames"> <li>tom</li> <li>rose</li> <li>jim</li> <li>smith</li> <li>jerry</li> <li>Ary</li> <li>lucy</li> </ul> <script> function nameSort(){ //获取ulNames的innerHTML var html = document.getElementById("ulNames").innerHTML; //删除html开头的空字符<li>和结尾的</li>空字符 html=html.replace(/^\s*<li>|<\/li>\s*$/g,''); //将html按</li>空字符<li>切割保存为names数组中 var names = html.split(/<\/li>\s*<li>/); //将数组中的名字排序 names.sort(); //拼接成 html代码 html="<li>"+names.join("</li><li>")+"</li>"; //将拼接好的html写到ulNames中去 ulNames.innerHTML=html; }

    思路2:简便方法

    ulNames.innerHTML="<li>"+ ( ulNames.replace(/^\s*<li>|<\/li>\s*$/g,'') .split(/<\/li>\s*<li>/) .sort() .join("</li><li>") ) +"</li>";
    最新回复(0)