web-dev-qa-db-fra.com

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

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 j'ai besoin de trouver tous les <li> éléments qui contiennent "John" et "Mary", comment puis-je construire le jQuery?

La recherche d'une seule chaîne semble simple:

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

Je recherche quelque chose comme le pseudo-code suivant:

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

Merci!

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

Répondre

Pour rechercher les li contenant du texte contenant les deux Mary [~ # ~] et [~ # ~] John:

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

Pour trouver les li contenant du texte contenant SOIT Mary [~ # ~] ou [~ # ~] John:

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

Explication

Pensez juste au :contains comme s'il s'agissait d'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

C'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

108
Adam Kiss

Que diriez-vous

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

Répondre

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

Mais j'ai découvert que si vous aviez de nombreux cas à tester, jQuery fonctionnera très mal (en particulier sur IE6, je sais, il est ancien mais toujours utilisé). J'ai donc décidé 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;
};
5
Kristof

C'est facile:

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