javascript - 如何根据标题对多个表格重新排序？

Question

我想根据各自的标题按字母顺序对许多表格重新排序。

示例:

目前，我有:

1. 标题为“PHP”的表格

2. 标题为“Javascript”的表格

3. 标题为“Android”的表格

我想看看:

1. 标题为“Android”的表格

2. 标题为“Javascript”的表格

3. 标题为“PHP”的表格

我不知道该怎么做。

这是我的代码:

$('table').each(function() {
    $caption = $(this).find('>caption');
    $table = $(this);
    $table.sort(function (a, b) {
        var $a = $(a),
        $b = $(b),
        aVal = $a.find(">caption").text().toLowerCase(),
        bVal = $a.find(">caption").text().toLowerCase();
        if (aVal < bVal) return -1;
        else if (aVal > bVal) return 1;
        else return 0;
    });
    $('#results').append($table);
});

Answer 1

您无法在遍历表格时对表格进行排序。

首先您可以获得每个表的标题，然后将其与对应的表分组并将其放入一个数组中。现在对数组进行排序并显示内容。

var tables = [];
$('table').each(function() {
    var caption = $(this).find('caption')[0];
    tables.push({
       'table' : $(this),
       'caption': $(caption).text().toLowerCase()
    });
});
tables.sort(function (tableA, tableB){
    if (tableA.caption < tableB.caption){
        return -1;
    }
    if (tableA.caption > tableB.caption){
        return 1;
    }
    return 0;
});

$.each( tables, function( index, tableObject){
    $('#results').append(tableObject.table);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> <caption>Zhp</caption> </table>
<table> <caption>php</caption> </table> 
<table> <caption>Javascript</caption> </table>



<div id="results"></div>