使用jQuery按类对li元素进行排序

时间:2012-04-11 16:01:57

标签: jquery html sorting jquery-selectors html-lists

我想通过jQuery

的数组重新排序li元素

我的列表代码如下所示:

<html>
<head>
<script src="list.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div class="list">
   <ul class="xyz">
     <li class="element1">content for 1</li>
     <li class="element2">content for 2</li>
     <li class="element3">content for 3</li>
   </ul>
</div>

</body>
</html>

我现在想通过数组重新排序DOM元素。

我试过,但我没有让它运行:

var array = ['element2', 'element1', 'element3'];

$.each(array,function(index,value){
   $('.xyz').append($(value));
});

2 个答案:

答案 0 :(得分:6)

您错过了. - 要选择包含class的DOM元素,您必须使用. - 请参阅class selector文档

var array = ['element2', 'element1', 'element3'];

$.each(array,function(index,value){
   $('.xyz').append($('.'+value));    // add . here
});​

或者,您可以将.添加到数组

Working example here

答案 1 :(得分:1)

我会将每个li的内部HTML放入一个数组中,清空元素的ul,然后使用第一步中创建的数组的已排序项重新填充ul