Question

我想根据类名重新排列表行下面是我的HTML代码。

<table>
 <tr class="a4"><td>4</td></tr>
 <tr class="a6"><td>6</td></tr>
 <tr class="a1"><td>1</td></tr>
 <tr class="a2"><td>2</td></tr>
 <tr class="a5"><td>5</td></tr>
 <tr class="a3"><td>3</td></tr>
</table>

所以现在，类名a1应首先显示，同样a2秒......等等。

请有人帮助我

Answer 1

如果您不想依赖外部插件，可以使用match()从类名中提取数字，并使用内置的sort()方法对元素进行排序。

从那里，您可以使用append()对表行重新排序（它将从表中删除每一行，然后将其重新添加到正确的位置）：

$("table").append($("tr").get().sort(function(a, b) {
    return parseInt($(a).attr("class").match(/\d+/), 10)
         - parseInt($(b).attr("class").match(/\d+/), 10);
}));

您可以在this fiddle中看到结果。

Answer 2

您可以使用this插件，例如：

jQuery.fn.sortElements = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();
// do the sorting
$('tr').sortElements(function(a, b){
    return $(a).attr('class') > $(b).attr('class') ? 1 : -1;
});

在这里摆弄：http://jsfiddle.net/ZV5yc/1/

根据类名对表行进行排序

2 个答案: