1

我有一个包含字符串列表的数百行长的 html 表。我还有一个输入框，可以在表格中插入新行。每行中的第二个 td 元素始终是 div 中的字符串，因此表中的一行可能如下所示：

<tr>
    <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    </td>
    <td class="a_string" style="width:200px;">
        <div style="word-wrap:break-word;">hello world</div>
    </td>
    ...
</tr>

我想根据用户的字符串列表向该表中插入新行，如果字符串已经在表中，它将被忽略并且不会插入。当来自用户的字符串列表很长并且表中的行数很长时，就会出现问题，我用来检查重复项的仓促编写的方法对于这个任务来说效率太低了：

function check_rows(item) { //called on each item in input list
    var tf = false;
    $('#mytable tbody').children().each(function (i) {
        //loop through each tr

        if ($('#mytable tbody').children().eq(i).children().eq(1).hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == $('#mytable tbody').children().eq(i).children().eq(1).children().eq(0).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}

该函数做了它应该做的事情（检查重复的字符串），它太慢了。我试图在没有此功能的情况下插入列表，它几乎是瞬时的，所以问题就在这里。

任何有关如何改进此功能的建议将不胜感激！

4

3 回答 3

1

你可以试试下面的代码。你不必使用$('#mytable tbody')inside each。而是使用this.

尝试将元素分配给变量，它将创建一个更快的引用。

function check_rows(item) { //called on each item in input list
    var tf = false;
    $('#mytable tbody').children().each(function (i) {
        //loop through each tr

        var tr = $(this).eq(i).children();    
        if (tr.eq(1).hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == tr.eq(1).eq(0).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}
于 2013-02-16T01:57:44.917 回答
0

如果您知道要对相同的材料进行大量 DOM 搜索，那么您可能希望将相关数据复制到一个 javascript 数据结构中，这比每次遍历 DOM 搜索要快得多时间。

如果您正在检查字符串上的完全匹配，您甚至可以使用 javascript 对象的索引功能来给您一个非常快速的是/否的答案，即确切的字符串是否已经在您的数据结构中。这应该比通过 DOM 的线性搜索快几个数量级。

于 2013-02-16T01:55:11.673 回答
0

我会使用这样的选择器

function check_rows(item) { //called on each item in input list
    var tf = false,
        mytbody = $('#mytable tbody'),
        secondCell;
    $('tr', mytbody).each(function (i) {
        //loop through each tr
        secondCell = $('td', this).eq(1);
        if (secondCell.hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == $('div:first', secondCell).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}
于 2013-02-16T01:56:26.663 回答