查找行索引的有效方法？答案

【问题标题】：Efficient way of finding index of row?查找行索引的有效方法？
【发布时间】：2012-04-18 21:50:24
【问题描述】：

我通过这样做得到一行的索引：

row.parent().children("tr").index(row)

有没有更有效的方法来查找索引？我有数百行，所以我必须选择所有行才能找到索引。

【问题讨论】：

可能重复stackoverflow.com/questions/788225/…

标签： javascript jquery html performance jquery-selectors

【解决方案1】：

这里最快的方法可能是使用纯javascript：

function getRowIndex(elem) {
    var index = 0;
    while (elem = elem.previousSibling) {
        if (elem.tagName == "TR") {
            ++index;
        }
    }
    return(index);
}

工作演示：http://jsfiddle.net/jfriend00/y4anN/

如果您必须在没有动态更改的大表上重复执行此操作，那么您可以使用自定义属性预先对行进行一次编号，从那时起，您只需检索任意行的自定义属性。

您可以使用这样的自定义属性对所有行进行预编号：

function numberRows(table) {
    var rows = table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].dataIndex = i;
    }
}

然后，您可以像这样从任何给定行获取索引号：

row.dataIndex

工作演示：http://jsfiddle.net/jfriend00/CR2Wk/

【讨论】：

【解决方案2】：

如果您以某种方式获取对行的引用（点击处理程序等），则在查找该元素时没有额外的开销，只需 .index() 它和利润（尽管注意多个有效的 tbody 元素但会增加脚本的复杂性）

如果您在运行时索引所有 tr 元素，不妨将其缓存在 jquery 数据中以备将来使用！

【讨论】：

【解决方案3】：

row.prevAll().length怎么样？

【讨论】：

+1 用于在性能问题场景中使用纯 Javascript！我能够使用这个：row[0].rowIndex

【解决方案4】：

Id 属性是解析任何 html 最快的方法。您可以为所有行提供一个 ID。

虽然 index 方法会确定兄弟元素之间的索引，但可能会更快

row.parent("tr").index();

看这个例子http://jsfiddle.net/shNrS/

【讨论】：

【解决方案5】：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        console.log($("tr").index($("#my")));
    })
    </script>
</head>
<body>
    <table border="0" cellspacing="5" cellpadding="5" id="tbl">
        <tr><th>Header</th></tr>
        <tr><td>Data</td></tr>
        <tr id="my"><th>Header</th></tr>
        <tr><th>Header</th></tr>
        <tr><td>Data</td></tr>
    </table>
</body>
</html>

希望对您有所帮助。干杯。

【讨论】：

没有-1，但你可以选择$("#my").index();，没有必要高估