使用Javascript对UL类child进行排序_Javascript_Html Lists

使用Javascript对UL类child进行排序

javascript

使用Javascript对UL类child进行排序,javascript,html-lists,Javascript,Html Lists,我对JavaScript非常陌生。我已经看了前面回答的几个问题。我的HTML大致如下： <!DOCTYPE html> <html> <head> <style type="text/css"> .skills{ list-style:none; padding: 0; margin-bottom: 200px; } .skills li{ width: 200px; float: left; padding: 0; } </style&

我对JavaScript非常陌生。我已经看了前面回答的几个问题。我的HTML大致如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.skills{
list-style:none;
padding: 0;
margin-bottom: 200px;
}
.skills li{
width: 200px;
float: left;
padding: 0;
 }
 </style>
 </head>
  <body>
  <h2>Skills</h2>
<ul class="skills">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
  </body>
  </html>


.技能{
列表样式：无；
填充：0；
边缘底部：200px；
}
李先生{
宽度：200px；
浮动：左；
填充：0；
}
技能

a
b
c
d
e

我尝试使用：

 <script type="text/javascript">
   function sortLi()
    {
      var skills = [getElementsbyTagName("li")];
      skills.sort();
          var x=document.getElementsByTagName("li");
              x.innerHTML=skills;
     }
  </script>


函数sortLi（）
{
var skills=[getElementsbyTagName（“li”）]；
skills.sort（）；
var x=document.getElementsByTagName（“li”）；
x、 innerHTML=技能；
}

并通过将.getElementsbyTagName与.getElementsbyClass（“技能”）交换而无效。我知道我做错了什么事，但就是不能指出原因。

查看此解决方案

这使用jQuery，几乎完全是从另一个答案中提取出来的

基本上你有一些语法错误，你不调用你的代码，等等。看看我链接到的JSFIDLE函数的工作解决方案，看看这是否有帮助。

我想我应该说我在按字母顺序排序。你应该使用

getElementById（'skills'））

获取元素，当然设置

ul

元素的id为skillsvar x=document.getElementsByTagName（“ul”）[0]；这个答案可能对您有所帮助：。演示：好的，我已经纠正了你的想法，也纠正了我的打字错误（格式），但仍然没有运气：(

var mylist = $('.skills');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) {
    mylist.append(itm);
});