如何分类<；ul>&书信电报；李>'；基于javascript的类？

我有一个带有无序列表的待办事项列表应用程序。在它里面我有一些列表项。李班分为高班、中班、低班。我想把高年级的李排在中等年级的李之前，最后一个低年级的李

<ul id="tasks">
  <li id="item3" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item3')"></a><span>This is a low priority task</span></li>
  <li id="item4" class="priority high"><></span><a href="#" class="closex" onclick="removeItem('item4')"></a><span>This is a high priority task</span></li>
  <li id="item5" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item5')"></a><span>This is another Low</span></li>
  <li id="item7" class="priority medium"><span></span><a href="#" class="closex" onclick="removeItem('item7')"></a><span>And now a Medium</span></li>
</ul>

这是一项低优先级任务
这是一项高优先级任务
这是另一种低优先级
现在是中等

---

因此，id为item4的li应该是第一个，然后是item7，然后是class为low的li。

假设您可以使用jQuery，并且假设您的列表不是很大，假设您只有这三个固定类型，并且没有计划更改它，我可能会将整个集合转储到内存中，清除列表，然后按顺序将它们放回列表中。比如：

jQuery(document).ready(function() {
    var i;
    var items = jQuery("#tasks li");
    var lowItems = [];
    var medItems = [];
    var highItems = [];
    for (i = 0; i < items.length; ++i) {
        var jqItem = jQuery(items[i]);
        if (jqItem.hasClass("low")) lowItems.push(jqItem);
        if (jqItem.hasClass("medium")) medItems.push(jqItem);
        if (jqItem.hasClass("high")) highItems.push(jqItem);
    }
    var tasks = jQuery("#tasks");
    tasks.html("");
    for (i = 0; i < highItems.length; ++i) {
        tasks.append(highItems[i]);
    }   
    for (i = 0; i < medItems.length; ++i) {
        tasks.append(medItems[i]);
    }   
    for (i = 0; i < lowItems.length; ++i) {
        tasks.append(lowItems[i]);
    }
});

jQuery（文档）.ready（函数（）{
var i；
var items=jQuery（“#tasks li”）；
var lowItems=[]；
var medItems=[]；
var highItems=[]；
对于（i=0；i

试试这个：

$(function(){
    var sorter = [],
        tasks = $('#tasks');
    $('li.priority').each(function(){
        var $this = $(this),
            priority = $this.hasClass('high') ? 3 : ($this.hasClass('medium') ? 2 : 1);
        sorter.push({
            el : this,
            priority : priority
        });
    }).detach();

    sorter.sort(function(a, b){
        return a.priority - b.priority;
    });

    $.each(sorter, function(){
        tasks.append(this.el);
    });
});

没有jquery时：

<ul id="tasks">
 <li id="item3" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item3')"></a><span>This is a low priority task</span></li>
 <li id="item4" class="priority high"><></span><a href="#" class="closex" onclick="removeItem('item4')"></a><span>This is a high priority task</span></li>
 <li id="item5" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item5')"></a><span>This is another Low</span></li>
 <li id="item7" class="priority medium"><span></span><a href="#" class="closex" onclick="removeItem('item7')"></a><span>And now a Medium</span></li>
</ul>

<script type="text/javascript">
var tasks = document.getElementById("tasks");
var liElements = tasks.getElementsByTagName("li");
var lowPriority = [];
var mediumPriority = [];
var highPriority = [];
var removal = [];
for (var i = 0, len = liElements.length; i < len; i++) {
    if (liElements[i].getAttribute("class").indexOf("low") > -1) lowPriority.push(liElements[i].cloneNode(true));
    if (liElements[i].getAttribute("class").indexOf("medium") > -1) mediumPriority.push(liElements[i].cloneNode(true));
    if (liElements[i].getAttribute("class").indexOf("high") > -1) highPriority.push(liElements[i].cloneNode(true));
    removal.push(liElements[i]);
}

for (var i = 0, len = removal.length; i < len; i++ ) {
    var liItem = removal[i];
    liItem.parentNode.removeChild(liItem);
}

for( var i = 0, len = lowPriority.length; i < len; i++){
    tasks.appendChild(lowPriority[i]);
}
for (var i = 0, len = mediumPriority.length; i < len; i++) {
    tasks.appendChild(mediumPriority[i]);
}
for (var i = 0, len = highPriority.length; i < len; i++) {
    tasks.appendChild(highPriority[i]);
}
</script>

这是一项低优先级任务
这是一项高优先级任务
这是另一种低优先级
现在是中等

var tasks=document.getElementById（“任务”）；
var liElements=tasks.getElementsByTagName（“li”）；
var lowPriority=[]；
var mediumPriority=[]；
var高优先级=[]；
var去除=[]；
对于（变量i=0，len=liElements.length；i-1）lowPriority.push（liElements[i].cloneNode（true））；
if（liElements[i].getAttribute（“class”）.indexOf（“medium”）>-1）mediumPriority.push（liElements[i].cloneNode（true））；
if（liElements[i].getAttribute（“class”）.indexOf（“high”）>-1）highPriority.push（liElements[i].cloneNode（true））；
移除、推送（元素[i]）；
}
对于（变量i=0，len=removation.length；i

这里是另一个jQuery–less选项：

// Just a helper
function toArray(obj) {
  var result = [];
  for (var i=0, iLen=obj.length; i<iLen; i++) {
    result[i] = obj[i];
  }
  return result;
}

// Uses querySelectorAll, but could use getElementsByTagName instead
function sortByPriority(id) {
  var nodes;
  var el = document.getElementById(id);

  if (el) { 
    nodes = toArray(el.querySelectorAll('li.priority'));
    nodes.sort(function(a, b) {
      function getIndex(el) {
        return el.className.indexOf('low') != -1? 1 : 
               el.className.indexOf('medium') != -1? 2 :
               el.className.indexOf('high') != -1? 3 :
               0; // default
      }
      return getIndex(b) - getIndex(a);
    });

    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      el.appendChild(nodes[i]);
    }
  }
}

//只是个助手
功能到阵列（obj）{
var结果=[]；
对于（var i=0，iLen=obj.length；i这里是@ŠimeVidas jQuery解决方案的纯JS版本

var tasks = document.querySelector('#tasks'),
    items = document.querySelectorAll('#tasks > li');

for (var i = 0, arr = ['high', 'medium', 'low']; i < arr.length; i++) {
    for (var j = 0; j < items.length; j++) {
        if (~(" " + items[j].className + " ").indexOf(" " + arr[i] + " "))
            tasks.appendChild(items[j]);
    }
}

var tasks=document.querySelector（“#tasks”），
items=document.querySelectorAll（'#tasks>li'）；
对于（var i=0，arr=[‘高’、‘中’、‘低’]；i
使用纯JavaScript和简单的代码

var tasks = document.getElementById("tasks");
var lis = tasks.getElementsByTagName("li");
var lisarr = Array.prototype.slice.call(lis);

var priority = function(e){
    var prio = {low: 0, medium: 1, high: 2};
    return prio[e.getAttribute("class").match(/low|high|medium/)[0]];
};

lisarr.sort(function(a,b){
    var ap = priority(a), bp = priority(b);
    return bp - ap;
});

tasks.innerHTML = lisarr.reduce(function(prev, current){
    return prev + current.outerHTML;
}, '');

php是一个选项吗？因为这样做会很容易。为什么它们一开始是无序生成的？比如，它来自哪里？db？文件？硬编码html？有人在这里提出了类似的问题jQuery解决方案：（5行代码）@user1792879像jQuery这样的库提供的API远远优于本机浏览器API。库还处理跨浏览器的不兼容问题。出于学习目的，欢迎您尝试纯JS，但在编写实际的web应用程序时，我强烈推荐一个库。Šime Vidas的JSFIDLE答案看起来也一样以一种更短更干净的方式，所以我可能会这样做。谢谢你，这正是我所需要的。这是我在相当一段时间内见过的最好的伪装冒泡排序！它在大列表中表现如何？很酷地使用
~
，比
@RobG:ŠimeVidas漂亮得多。我很喜欢
~
诀窍，但为了使
-1
-1更清晰，有一些话要说。你是对的，它可以更简洁，因为这里没有误报的机会。@ŠimeVidas:这也很好，只是为
.forEach（）
快速填充。
.slice（）
在IE8中不起作用，但这并不难解决。：）@RobG我预计大型列表会出现性能问题，因为在这个过程中，
任务
元素没有分离（从DOM中分离），所以每个
.appendChild（）都会出现性能问题
触发页面重新流动。需要注意的几件事：可能有子LIs不是UL的直接子节点，不应与其他节点一起排序；将主机对象视为本机对象（
Array.prototype.slice.call（LIs）
）会在某些浏览器中引发错误（即至少<8）；outerHTML不受很好的支持；
.reduce
是一种ES5方法，因此较旧的浏览器不支持它。但是，另外，请注意整洁。：-）感谢您的澄清。这不是较旧浏览器的最佳解决方案。