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

假设我有：

<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”的所有<li>元素，我将如何构造jQuery？

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

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

我正在寻找类似以下伪代码的内容：

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

谢谢！

回答

为了找到li“具有同时包含玛丽文本•和约翰：

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

要查找li包含文本“ EITHER Mary或John”的，请执行以下操作：

$('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

怎么样

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

回答

正确的语法是 $("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;
};

这很容易：

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