Question

我有一个数百行的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;
}

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

非常感谢任何有关如何改进此功能的建议！

Answer 1

您可以尝试以下代码。您不必在$('#mytable tbody')内使用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;
}

Answer 2

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

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

Answer 3

我会使用像这样的选择器

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;
}

使用Jquery搜索许多元素时减慢速度

3 个答案: