7

鉴于下面的 HTML，我正在尝试使用 jQuery 来匹配具有类“foo”的跨度的所有列表项，并且该跨度应包含文本“相关”。

<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>

请注意，还有一些带有“bar”类的跨度，并且还有文本“相关”，不应该包括在内。

我对选择器的尝试：

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

这不起作用。下一个示例选择了一些东西，但没有考虑到列表中有多个跨度：

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

这是一个你可以玩的活生生的例子。在工作版本中，应该只选择该列表的第一个和第四个元素。

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 回答