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

Question

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

示例：

目前，我有：

table 标题为 "PHP"
table 标题为 "Javascript"
table 标题为 "Android"

我想看：

table 标题为 "Android"
table 标题为 "Javascript"
table 标题为 "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

您无法在遍历 table 时对它们进行排序。

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

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>

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

How do I reorder many tables according to their caption?

javascript

sorting

jquery

tablesort