jQuery: contient sélecteur pour rechercher plusieurs chaînes

Question

En supposant que j'ai:

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

Si je dois trouver tous les

Les éléments qui contiennent « John » et « Mary », comment pourrais-je construire le jQuery?

Une recherche pour une seule chaîne semble facile:

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

Je cherche quelque chose comme le pseudo-code suivant:

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

Merci!

Answer 1

Réponse

Pour li de texte qui ont contenant à la fois Mary John:

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

Pour li de texte qui ont contenant soit Mary ou John:

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

Explication

Il suffit de penser à la :contains comme si elle était une déclaration de classe, comme .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

Il est la même chose avec :contains:

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

Démo

http://jsbin.com/ejuzi/edit

Answer 2

Qu'en est-

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

Answer 3

Réponse

La syntaxe correcte serait $("li:contains('John'),li:contains('Mary')").css("color","red")

Mais je trouve que si vous avez eu de nombreux cas de test, jQuery fonctionnera très mal (surtout sur IE6, je sais, il est vieux mais toujours en cours d'utilisation). Je décide donc d'écrire mon propre filtre d'attribut.

Voici comment l'utiliser: $("li:mcontains('John','Mary')").css("color","red")

code

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

Answer 4

Il est facile:

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