排序JavaScript的元素 [英] Sort Elements of javascript

问题描述

可能重复：

JavaScript的HTML元素

我需要排序这种格式的元素列表

I need to sort a list of elements in this format

<table width='a number' bord ...>
  <tbody>
    <tr>
      header data
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        rob
      </td
      <td style='asdasdas' class='asdasdasd' ...>
        mike
      </td>
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        chuck
      </td>
      <td style='asdasdas' class='asdasdasd' ...>
        kev
      </td>
    </tr>
  </tbody>

我需要能够使用列表，以便人们可以按字母顺序排列名称，不了解如何做到这一点

I need to be able to resort the list so people can have the names alphabetical order, I can't understand how to do this

推荐答案

这是一个简单的javascript函数，可以对任何一组标记元素进行排序：

Here's a plain javascript function that will sort any set of tagged elements:

function sortElements(parentId, tagClass) {
    var itemsToSort, p = document.getElementById(parentId);
    if (p.getElementsByClassName) {
        itemsToSort = p.getElementsByClassName(tagClass);
    } else {
        itemsToSort = getElementsByClassName(tagClass, "*", p);
    }
    // get all data into a sortable array
    var data = [], order = [], item, placeHolder, i;
    for (i = 0; i < itemsToSort.length; i++) {
        item = itemsToSort[i];
        // save position of item by inserting a placeholder right before it
        placeHolder = document.createElement(item.tagName);
        item.parentNode.insertBefore(placeHolder, item);
        order.push(placeHolder);
        // save item and text
        data.push({obj: item, text: strTrim(item.innerHTML)});
    }
    // sort the item array by the text
    data.sort(function(a, b) {
        return(a.text.localeCompare(b.text));
    });
    // now reinsert items in sorted order
    for (i = 0; i < data.length; i++) {
        item = data[i].obj;
        placeHolder = order[i];
        // insert in new location
        placeHolder.parentNode.insertBefore(item, placeHolder);
        // remove placeholder
        placeHolder.parentNode.removeChild(placeHolder);
    }
}

function strTrim(str) {
    return(str.replace(/^\s+/, "").replace(/\s+$/, ""));
}

// replacement for older versions of IE
function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

你可以看到它在这里工作： http://jsfiddle.net/jfriend00/EztNw/ 。这个演示显示它排序OP的表单元格和一个有序列表，只是为了显示该函数适用于任何元素集。

​You can see it work here: http://jsfiddle.net/jfriend00/EztNw/. This demo shows it sorting the OP's table cells and an ordered list just to show that the function works on any set of elements.

我知道的唯一限制是标记的元素不能是其他标记元素的子代。

The only limitation I'm aware of is that tagged elements cannot be children of other tagged elements. Works well for cells in a table.

这也使用 getElementsByClassName（），所以如果需要较旧版本的IE ，那么将添加一个替代/垫片（包含在jsFiddle中）。

This also uses getElementsByClassName() so if older versions of IE are required, then a substitute/shim for that would be added (which is included in the jsFiddle).

这是如何工作的：

1. 获取要排序的所有对象的列表


2. 将每个项目所在的临时占位符对象放在一起，以便我们知道将东西放在哪里以排序顺序返回


3. 构建要排序的对象数组和排序键（在这种情况下为文本）


4. 对该数组排序
5. 
   
6. 以现在排序的顺序重新插入排序的对象，使用占位符作为指导，指导他们去哪里 - 在使用插槽后删除占位符

1. Get a list of all objects you want sorted
2. Put a temporary placeholder object where each item is currently located so we know where to put things back in sorted order
3. Build an array of the objects to be sorted and the sort key (text in this case)
4. Sort that array
5. Reinsert the sorted objects in the now sorted order, using the placeholder as a guide for where they go - remove the placeholder after it's slot is used

这篇关于排序JavaScript的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！