jQuery :has(.something:contains()) 不受支持？答案

【问题标题】：jQuery :has(.something:contains()) unsupported?jQuery :has(.something:contains()) 不受支持？
【发布时间】：2010-11-25 06:12:25
【问题描述】：

鉴于下面的 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"))

Here is a live example that you can play with。在工作版本中，只应选择该列表的第一个和第四个元素。

【问题讨论】：

+1 用于在问题中使用 jsbin，节省了我们所有的工作时间。
@Kobi - +1 承认你在工作中如此 :)

标签： jquery jquery-selectors

【解决方案1】：

看看这个：

$(document).ready(function(){
    $('span.foo:contains(relevant)').parents('li').each(function() {
       alert($(this).text());
    });
});

【讨论】：

选择 span.foo，而不是列表项。

【解决方案2】：

被打败了……但是如果你想要一个纯粹的选择器，那你就太接近了

ul li:has(span[class='foo']:contains('relevant'))

【讨论】：

【解决方案3】：

我试图颠倒选择器的顺序：

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

这似乎运作良好，但不能说明原因：http://jsbin.com/asoma

【讨论】：

【解决方案4】：

我知道这可能不那么优雅，但至少它会起作用：

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

我也无法让您的版本运行...

【讨论】：

【解决方案5】：

不确定为什么选择器会出现这个问题，但确认这确实有效：

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

【讨论】：