5

実行速度を上げるために、これをどのように記述しますか。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>

ありがとう

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フィドルデモ

SizzleベースlookAt()のアプローチに対する関数アプローチを調べるJSPerfテストreturn $(this).is(':contains("a")')。

参考までに、詳しく比較すると、JSPerfjQueryテストは次のとおりです。

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

または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ベースであることに注意してください（テストケースには、0ではなく1の一致する要素が含まれていなかったため）。

デモンストレーション： 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 に答える