web-dev-qa-db-ja.com

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

ありがとう！

jqueryjquery-selectorscss-selectorscontains
60
zıəs uɐɟəʇs

回答

両方のメアリー[〜＃〜]と[〜＃〜]ジョンを含むテキストを持つliを見つけるには：

$('li:contains("Mary"):contains("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

108
Adam Kiss

どう？

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

回答

正しい構文は$("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;
};
5
Kristof

それは簡単です：

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