Question

我有一个非常大的表（我需要显示超过4000行）并且我需要为每个（例如）连续的第4个单元格添加一些类。我的代码可以在大约800ms内完成。但我需要做2次（对于另一个列和另一个类），因此用户必须等待很长时间。

伙计们，如果我错过了一些昂贵的东西，请你看看我的代码吗？我最关心的是那段代码：

// $(td) - is a cell in header that was clicked
// index = column number to add class
var countColumns = $(td).closest("table").find("tr:last").children("td").length;
var $childrenTD = $(td).closest("table").find("tr").not("headrow").children("td");
for(var i=index; i<$childrenTD.length; i+=countColumns) {
    $($childrenTD[i]).addClass(cssClass);
}

Answer 1

在我看来，你可以这样做：

$(td).closest("table")
    .find("tr:not(.headrow) td:nth-child(" + index + ")")
    .addClass(cssClass);

在这里，您选择td:nth-child(4)，即每个td，它是其父（行）的第4个孩子。

Answer 2

首先...... Ben Alpert的回答很好，可能是可以接受的。

如果您仍然发现自己遇到性能或速度方面的问题，我建议您采用“老式方式”......使用vanilla JavaScript和DOM遍历：

这是一个fiddle。我在这里使用了混合JQuery / vanilla-js代码来跳过任何代价高昂的查询。

$('td').click(function() {
    //get all the trs in the table.
    var trs = this.parentElement.parentElement.parentElement.getElementsByTagName('tr');

    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if ($(tr).hasClass('headrow')) continue;
        var fourth = tr.getElementsByTagName('td')[3];        
        $(fourth).addClass('someclass');
    }
});

如果没有使用一些自定义函数来添加和测试来自DOM的类，这将不会比这快得多，这很痛苦。

编辑：Here's a fiddle for a 100% vanilla JS solution

这是它的100％香草版本（我没有在IE中测试过）：

function bindAllElements(elements, eventName, fn) {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.addEventListener(eventName, fn);
    }
}

function hasClass(element, className) {
    if (typeof element.className === 'undefined') return false;
    return element.className.indexOf(className) >= 0;
}

function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += ' ' + className;
    }
}

var alltds = document.getElementsByTagName('td');

bindAllElements(alltds, 'click', function(e) {
    var td = e.target || event.srcElement;
    var table = td.parentElement.parentElement.parentElement;
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if (!hasClass(tr, 'headrow')) {
            addClass(tr.getElementsByTagName('td')[3], 'someclass');
        }
    }
});

EDIT2：这是一个有趣的挑战...... here is a jsperf展示了VanillaJS / Jquery / Hybrid的表现。

它表明VanillaJS版本的速度是其他建议方式的两倍。

列中每个单元格的addClass（）更快

2 个答案: