jqueryですべての正確なtdの一致を見つける

Question

$('#servertable td:eq(' + server + ')') 

これは、すべての一致を見つける方法（最初は私が考える）のみを見つけます。 btw。 td：containsは私のためには機能しません。

Answer 1

eqは、単一の行だけを返す数値インデックスが必要です。内容と一致するようにするには、:containsセレクタを使用する必要があります。セレクタが（ほとんどの場合）誤っていないので（問題ではない、それは...）

のように、「動作しない」と言ってそれを投げ捨てることは、問題の正しいアプローチではありません。

とにかく、あなたはこのようなテーブルがある場合：

<table> 
    <tr> 
    <td>Hello</td> 
    <td>World</td> 
    </tr> 
    <tr> 
    <td>World</td> 
    <td>Hello</td> 
    </tr> 
    <tr> 
    <td>Hello</td> 
    <td>Hello</td> 
    </tr> 
</table> 

をこのjQueryのコード：

$(function() { 
    $("td:contains('Hello')").css('color','red'); 
}); 

は赤に "こんにちは" とのすべてのセルを回します。 Demo。あなたは、セルの正確な内容を一致させる必要がある場合は、

$(function() { 
    var search = 'HELLO'.toLowerCase(); 
    $("td").filter(function() { 
     return $(this).text().toLowerCase().indexOf(search) != -1; 
    }).css('color','red'); 
}); 

あなたはに似たものを使用することができます：あなたは大文字小文字を区別しないマッチングが必要な場合は

は、あなたがfilter機能を使って、これを行うことができます上記：

$(function() { 
    var search = 'HELLO'.toLowerCase(); 
    $("td").filter(function() { 
     return $(this).text().toLowerCase() == search; 
    }).css('color','red'); 
}); 

上記（比較小文字に検索とコンテンツの両方を回して）大文字小文字を区別しませんが、あなたが大文字と小文字の区別をしたい場合はそうでなければ、ちょうどそれらを削除することができます。 Demo。

Answer 2

$('#servertable td') 

すべてのtd要素が見つかりますが、期待する内容は完全にはわかりません。

Answer 3

私が間違っているかもしれないが、:eq positional selector整数 N n番目整合素子を見つけをとります。

もしあなたがtd：eq（1）と言ったら、テーブルの2番目のTD要素が得られます（2番目のインデックスは0/0なので2番目です）。

私は、:contains selectorを使用したくないと思うのは、正確な文字列の一致を探していて部分的な一致は望んでいないからです。

jqueryには、あなたのニーズを満たすセレクタが組み込まれていることに気づいていません（もしそうなら、私を修正してください）。 1つを拡張機能として追加するか、属性セレクタなどの別の方法を使用して検索を行うことができます。

あなたが生成されたHTMLを制御することができるならば、あなたはそのような各TDにID属性を追加することができます。

<table id="servertable" border="1"> 
     <thead> 
      <tr><th>Server</th><th>Memory</th></tr> 
     </thead> 
     <tbody> 
      <tr><td id="server_mars">Mars</td><td>4 GB</td></tr> 
      <tr><td id="server_venus">Venus</td><td>1 GB</td></tr> 
      <tr><td id="server_jupiter">Jupiter</td><td>2 GB</td></tr> 
      <tr><td id="server_uranus">Uranus</td><td>8 GB</td></tr> 
      <tr><td id="server_mars_2010">Mars_2010</td><td>4 GB</td></tr> 
     </tbody> 
    </table> 
    <form> 
     <label for="server">Find:</label><input type="text" id="server" /> 
     <button id="find">Find</button> 
    </form> 

次の属性セレクタは、テーブルに正しいTDを見つけます：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#find").click(function() { 
      var server = $("#server").val(); 
      $("#servertable td").css("background-color", ""); // reset 
      $("#servertable td[id='server_" + server.toLowerCase() + "']").css("background-color", "#FFFF00"); 
      return false; 
     }); 
    }); 
    </script> 

を

あなたが代わりにあなたが探しているTDを持って行全体をターゲットにする場合は、あなたが追加することができ、追加のセレクタ：

 $("#servertable tbody tr").css("background-color", ""); 
     $("#servertable tbody tr:has(td[id='server_" + server.toLowerCase() + "'])").css("background-color", "#FFFF00"); 

tbodyタグは完全には必要ではありませんが、表本体の行と表ヘッダーの行を区別するだけです。

Answer 4

私もこの元の著者と同じ問題に遭遇しました。パウロとして、元の質問ポーズがあった。どのセレクタを使用して要素の内容の等価性チェックに基づいて要素を一致させることができますか？少なくとも私は彼が達成しようとしたことを推測し、それは彼（そして私も）がなぜ彼のコメントで指摘した明らかな理由のために含有物を使用できないのかを説明するだろう。とにかく誰かがここでつまずくと、ここでその答えを探しています。

jQueryにはデフォルトでそのようなマッチャーがありません。ソリューションは独自のマッチャーを定義することです。手で問題に取り組むにはMotteのこの優れたブログpostを参照してください。

Answer 5

試してみてください。containsExact

http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html

$.extend($.expr[":"], { 
containsExact: $.expr.createPseudo ? 
    $.expr.createPseudo(function(text) { 
    return function(elem) { 
    return $.trim(elem.innerHTML.toLowerCase()) === text.toLowerCase(); 
    }; 
    }) : 
    // support: jQuery <1.8 
    function(elem, i, match) { 
    return $.trim(elem.innerHTML.toLowerCase()) === match[3].toLowerCase(); 
    }, 

containsExactCase: $.expr.createPseudo ? 
    $.expr.createPseudo(function(text) { 
    return function(elem) { 
    return $.trim(elem.innerHTML) === text; 
    }; 
    }) : 
    // support: jQuery <1.8 
    function(elem, i, match) { 
    return $.trim(elem.innerHTML) === match[3]; 
    }, 

containsRegex: $.expr.createPseudo ? 
    $.expr.createPseudo(function(text) { 
    var reg = /^\/((?:\\\/|[^\/]))\/([mig]{0,3})$/.exec(text); 
    return function(elem) { 
    return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)); 
    }; 
    }) : 
    // support: jQuery <1.8 
    function(elem, i, match) { 
    var reg = /^\/((?:\\\/|[^\/]))\/([mig]{0,3})$/.exec(match[3]); 
    return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML)); 
    } 

});