Question

我有一个工作的JQuery，它在表中找到某个行，然后对它做了一些事情，我的问题是，有时候，我有超过2000个数据要匹配到td和超过2000行表，所以可能需要很长时间。

（P.S每个td只能匹配一次）

JQuery的

$("#tableAName").on("click", "tr", function () {
    //Get Some Data
    $.ajax({
        url: '@Url.Action("GetGroupRights", "Home")',
        data: { 'groupName': insertText },
        type: "post",
        cache: false,
        datatype: 'json',
        success: function (data) { <=== data RETURNS LIST OF STRING WHICH MATCH TD'S
        if (!jQuery.isEmptyObject(data)) {
            $td = $('#tableBName td');
            $.each(data.groupIDs, function (index, val) {
                $td.each(function () {
                    if ($(this).text() === val) {
                     $(this).closest(".classY").addClass(".classX")
              $(".classX").find(".classA").removeClass('classB').addClass('classC');


                  }
                });
            });
        }
    });
});

正如我之前提到的，这种方法非常好但可能非常慢，有没有一种方法可能一旦被发现就看不到某一行？

谢谢，如果您有任何疑问和/或需要更多信息，请询问

Answer 1

您可以对表进行传递以创建单元格值和元素引用的映射：

var map = {};
$("tableName td").each(function() {
  map[$(this).text()] = this;
});

然后你的ajax回调可以做到这一点：

$.each(data.groupIDs, function (index, val) {
    $(map[val]).find(".classA").removeClass("classB").addClass("classC");
});

（如果您总是在真实代码中执行.find()，那么您也可以在制作地图时预先计算出来。）

Answer 2

您可以通过将：contains过滤器添加到您的td选择器

来缩短部分时间

if (!jQuery.isEmptyObject(data)) {
    $.each(data.groupIDs, function (index, val) {
        $td = $('#tableBName td:contains(val)');
        $td.each(function () {
            if ($(this).text() === val) {
                $(".classX").find(".classA").removeClass('classB').addClass('classC');
                return false;
            }
        });
    });
}

Answer 3

您可以在.filter(fn)上使用$td来消除内部循环。该方法仅返回满足条件的td个元素，您可以直接对它们进行操作。请注意，.filter(fn)在内部使用.each()。因此，可能没有太多性能改进，但您的代码看起来更简洁。

$td = $('#tableBName td');
$.each(data.groupIDs, function (index, val) {
    $td.filter(function() {
        return $(this).text() === val;
    })
    .closest(".classY").addClass(".classX")
    .find(".classA").removeClass('classB').addClass('classC');
});

优化JQuery中的每个循环

3 个答案: