5

您如何编写它以使其运行得更快。看起来因为我正在使用 each() 它正在减慢它的速度。

我可以使用过滤器（）吗？

 $("#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>

谢谢

4

4 回答 4

8

我建议：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

或者影响所有tr具有后代的元素（无论嵌套多么深）：

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

JS 小提琴演示。

添加了一个功能，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 小提琴演示

JS Perf 测试检查lookAt()函数方法与return $(this).is(':contains("a")')基于 Sizzle 的方法。

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

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

JS 小提琴演示。

于 2012-07-10T13:32:50.240 回答
4

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

​$("#X tr:contains('a')").css("background-color", "red");​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-07-10T13:33:28.153 回答
3

使用包含和parent（回到tr我们想要着色的那个）：

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

或使用有：

$(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/

于 2012-07-10T13:32:40.573 回答
2

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

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';
    }
  }
}
于 2012-07-10T14:23:39.747 回答