Question

你如何写这个以便它运行得更快。它看起来像因为我正在使用each（）它正在减慢速度。

我可以使用filter（）吗？

 $("#X tr").each(function () {       
     if ($(this).find("table td:eq(1)").text() == "a") {
         $(this).css("background":"red");    
  }

});   

     <table id = "X">
        <tr >
        <td>a</td>
        <td>b</td>
        <td>c</td>
        </tr>
        <tr >
        <td></td>
        <td></td>
        <td></td>
        </tr>
        ...
        <tr >
        <td>a</td>
        <td>b</td>
        <td>c</td>
        </tr>
   </table>

感谢

Answer 1

我建议：

$('td:contains("a")').closest('tr').css('background-color','red');

JS Fiddle demo

或者，影响所有祖先tr元素：

$('td:contains("a")').parents('tr').css('background-color','red');

JS Fiddle demo

或者影响所有带有后代的tr元素（无论如何深度嵌套）：

$('tr').filter(
    function(){
        return $(this).find('td:contains("a")').length;
    }).css('background-color','red');

JS Fiddle demo

添加了可能改为使用的函数lookAt()：

function lookAt(haystack, needle) {
    if (!haystack) {
        return false;
    }
    else {
        needle = needle ? needle : 'a';
        for (var i = 0, len = haystack.childNodes.length; i < len; i++) {
            var cur = haystack.childNodes[i];
            if (cur.nodeType == 3 && cur.nodeValue.indexOf(needle) > -1){
                return true;
            }
            else if (i == (len-1)) {
                return false;
            }
        }
    }
}

$('#table td').filter(
    function() {
        return lookAt(this);
    }).css('background-color', 'red');

JS Fiddle demo

JS Perf test examining the lookAt() function approach against the return $(this).is(':contains("a")') Sizzle-based approach

作为参考，为了更仔细地比较，JS Perf jQuery测试如下：

$('#table td').filter(
    function() {
        return $(this).is(':contains("a")')
    }).css('background-color', 'red');

JS Fiddle demo

Answer 2

您可以使用:contains选择器：http://jsfiddle.net/Af6Nz/1/。

$("#X tr:contains('a')").css("background-color", "red");

Answer 3

使用contains和parent（返回我们想要着色的tr）：

$(this).find('td:eq(0):contains("a")').parent().css("background","red");

或使用has：

$(this).find('tr:has(td:eq(0):contains("a"))').css("background","red");

如果您不需要eq条件，请使用

$(this).find('td:contains("a")').parent().css("background","red");

请记住eq是基于0的（因为您的测试用例不涉及匹配元素1而不是0）。

示范：http://jsfiddle.net/KRqQN/

Answer 4

如果您对性能感到担心，以下内容可能有所帮助。

var getText = (function() {
  var div = document.createElement('div');

  if (typeof div.textContent == 'string') {
    return function (el) {
      return el.textContent;
    };

  } else if (typeof div.innerText == 'string') {
    return function (el) {
      return el.innerText;
    };
  }
}());

function foo(table) {
  var row, rows = table.rows;
  var i = rows.length;
  var re = /a/;

  while (i--) {
    row = rows[i];

    if (re.test(getText(row))) {
      row.style.backgroundColor = 'red';
    }
  }
}

如果a包含“a”，则将背景设为红色，但each（）为慢速

4 个答案: