2

が複数の条件を満たす場所<tr>からを選択できるかどうか疑問に思いました。例（最後のサンプル表を参照）：<table><td>

<tr>最初の列が「Audi」で、2番目の列が「red」であるすべてのを取得します

私はすでに1つの列でフィルタリングする方法を見つけました：

$('tr:has(td:nth-child(1):contains("Audi"))').doSomeThing();

しかし、私の問題は、次のようなAND条件でフィルタリングする方法です。

$('tr:has(td:nth-child(1):contains("Audi") && td:nth-child(2):contains("red"))').doSomeThing();

Multiple Attribute Selectorがあることは知っていますが、.text（）プロパティを検索しているので、問題に適切ではありません。

私のサンプルテーブル：

<table id="list">
<tr>
    <td>Audi</td>
    <td>red</td>
</tr>
<tr>
    <td>Audi</td>
    <td>yellow</td>
</tr>
<tr>
    <td>Audi</td>
    <td>green</td>
</tr>
<tr>
    <td>BMW</td>
    <td>red</td>
</tr>
<tr>
    <td>BMW</td>
    <td>yellow</td>
</tr>
<tr>
    <td>BMW</td>
    <td>green</td>
</tr>
    ...
</table>

あなたの助けに感謝します！

4

2 に答える 2

7

メソッドを使用してfilter、他の条件に基づいて最初の選択を絞り込みます。

$('tr:has(td:nth-child(1):contains("Audi"))').filter(':has(td:nth-child(2):contains("red"))').doSomeThing();

単一のセレクターを探している場合は、読みにくいものを次に示します。

$('tr:has(td:nth-child(1):contains("Audi")):has(td:nth-child(2):contains("red"))').doSomeThing();

ここにデモンストレーションがあります：http://jsfiddle.net/8Mnsf/2/

次のようにすることで、読みやすさをいくらか改善することもできます。

$('tr')
    .has('td:nth-child(1):contains("Audi")')
    .has('td:nth-child(2):contains("red")')
    .doSomeThing();
于 2012-11-23T12:10:10.810 に答える
1

最良の選択は、filter()メソッドを使用することです。jQuery のカスタム セレクター ( :contains、:hasなど) に依存することは、ほとんどの場合、最善の方法ではありません。ネイティブquerySelectorAll()が利用可能な場合は使用できず、パフォーマンスの問題になる可能性があるためです。

マニュアルから：

:has()は jQuery 拡張機能であり、CSS 仕様の一部ではないため、使用するクエリは、ネイティブ DOM メソッドによって提供されるパフォーマンスの向上を利用でき ませ:has()ん。querySelectorAll()最新のブラウザーでパフォーマンスを向上さ せるには、$("your-pure-css-selector").has(selector/DOMElement)代わりに使用してください。

また、そのようなセレクターは読みにくいため、保守性も低下します。メソッドは、必要に応じて合理的にコメントするfilter()こともできる単純な読み取り可能なコードです。

このようなもの：

$('tr').filter(function () {
    var $cells = $(this).children('td');
    return $cells.first().text() === 'Audi'
         && $cells.eq(1).text() === 'red';
});

jsFiddle デモ

于 2012-11-23T12:12:54.240 に答える