7

以下の HTML を考えると、jQuery を使用して、クラス "foo" のスパンを持つすべてのリスト項目と一致させようとしています。そのスパンには、テキスト "relevant" が含まれている必要があります。

<ul> 
  <li>Some text <span class="foo">relevant</span></li> 
  <li>Some more text <span class="foo">not</span> <span class="bar">relevant</span></li> 
  <li>Even more <span class="foo">not so either</span></li> 
  <li>Blablabla <span class="foo">relevant</span> <span class="bar">blabla</span></li> 
  <li>No foo here <span class="bar">relevant</span></li> 
</ul>

クラスが「バー」のいくつかのスパンもあり、それには「関連」というテキストも含まれていることに注意してください。これは含まれるべきではありません。

セレクターでの私の試み:

ul li:has(.foo:contains('relevant"))

これは動作しません。次の例では、何かを選択しますが、リスト内に複数のスパンがあることを考慮していません。

ul li:has(span:contains('relevant"))

で遊ぶことができる実際の例を次に示します。作業バージョンでは、そのリストの最初と 4 番目の要素のみを選択する必要があります。

4

5 に答える 5

6

これをチェックしてください：

$(document).ready(function(){
    $('span.foo:contains(relevant)').parents('li').each(function() {
       alert($(this).text());
    });
});
于 2009-09-03T11:10:28.600 に答える
4

それに打ちのめされた...しかし、純粋なセレクターが必要な場合は、非常に近かった

ul li:has(span[class='foo']:contains('relevant'))
于 2009-09-03T11:25:36.100 に答える
2

セレクターの順序を逆にしようとしました:

$("ul li:has(:contains('relevant').foo)").css('background-color', 'red');

これはうまくいくようですが、理由はわかりません: http://jsbin.com/asoma

于 2009-09-03T11:23:07.697 に答える
1

これはそれほどエレガントではないかもしれませんが、少なくともうまくいくでしょう：

$("ul li .foo:contains('relevant')").parent("li");

あなたのバージョンも動作させることができませんでした...

于 2009-09-03T11:16:14.030 に答える
0

セレクターで問題が発生している理由がわかりませんが、これが機能することを確認しました:

$("ul li").filter(":has(span.foo:contains('relevant'))").css('background-color', 'green');
于 2009-09-03T11:26:42.243 に答える