jQuery：包含选择器来搜索多个字符串

Posted 2023-02-23

【中文标题】jQuery：包含选择器来搜索多个字符串

【英文标题】：jQuery :contains selector to search for multiple strings

【发布时间】：2011-01-25 21:15:03

【问题描述】：

假设我有：

<li id="1">Mary</li>
<li id="2">John, Mary, Dave</li>
<li id="3">John, Dave, Mary</li>
<li id="4">John</li>

如果我需要找到所有包含“John”和“Mary”的

元素，我将如何构造jQuery？

搜索单个字符串似乎很容易：

$('li:contains("John")').text()

我正在寻找类似下面的伪代码：

$('li:contains("John")' && 'li:contains("Mary")').text()

谢谢！

【参考方案1】：

回答

要查找 li 的文本包含 BOTH Mary AND John：

$('li:contains("Mary"):contains("John")')

要查找具有包含 Mary OR John 的文本的 li：

$('li:contains("Mary"), li:contains("John")')

说明

把:contains 想象成一个类声明，就像.class：

$('li.one.two').      // Find <li>'s with classes of BOTH one AND two
$('li.one, li.two').  // Find <li>'s with a class of EITHER one OR two

:contains也一样：

$('li:contains("Mary"):contains("John")').      // Both Mary AND John
$('li:contains("Mary"), li:contains("John")').  // Either Mary OR John

演示

http://jsbin.com/ejuzi/edit

【讨论】：

如果数组中有字符串，我怎么能吐出包含？该数组将由复选框值构建，因此每次都没有标准长度？

【参考方案2】：

怎么样

$('li:contains("John"),li:contains("Mary")')

【讨论】：

而且 jQuery 甚至不会对任何内容进行两次索引。所以有一个自动过滤器，Lazarus 的答案确实找到了四个元素。

谢谢，这就是我希望的工作，但它没有。此选择器不返回任何结果。我快速尝试了一下：$('li:contains("John")','li:contains("Mary")').text() 我得到的只是“”。甚至 $('li:contains("John")','li:contains("Mary")').css('font-color','red') 似乎也不起作用。

我认为您在两个li:contains 之间插入了'。

因此，即使纠正了我在上面提到的测试中的虚假语法，这仍然会选择所有 元素。 $('li:contains("John"),li:contains("Mary")').css('color','red') 还有这个（分隔选择器的单引号）： $('li:contains( "John")','li:contains("Mary")').css('color','red') 根本不选择任何东西。

啊...我明白您的意思了，您只想要具有 both 条文本的 LI...嗯...我需要考虑一下.

【参考方案3】：

回答

正确的语法是$("li:contains('John'),li:contains('Mary')").css("color","red")

但我发现如果你有很多案例要测试，jQuery 的性能会很差（尤其是在 IE6 上，我知道，它很旧但仍在使用）。所以我决定编写自己的属性过滤器。

使用方法如下：$("li:mcontains('John','Mary')").css("color","red")

代码

jQuery.expr[':'].mcontains = function(obj, index, meta, stack)
    result = false;     
    theList = meta[3].split("','");

    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')

    for (x=0;x<theList.length;x++) 
        if (contents.indexOf(theList[x]) >= 0) 
            return true;
        
    

    return false;
;

【讨论】：

将.toLowerCase() 添加到contents 和theList[x] 以不区分大小写。

如何让它不区分大小写？

谢谢 - 这是我在 Chrome 中想要的：但这让我有点发疯，三个条目它只会匹配中间的一个：$("li:mcontains('John', 'Ringo', 'Mary')").css("color","red"); 经过一番调试，我找到了`theList = meta[3].split("','");` a) 我正在使用 ',' 来删除空格，例如：',' b) Split 给出的是 'John, Ringo, Mary' (注意第一个和最后一个条目上的单引号）然后：$("li:mcontains(John', 'Ringo', 'Mary)").css("color","red"); 确实有效！很高兴有人指出我做错了什么——但这就是我发现的

【参考方案4】：

很简单：

$("li:contains('John'):contains('Mary')")