jQuery: contient sélecteur pour rechercher plusieurs chaînes
-
19-09-2019 - |
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
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!
La solution
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
Autres conseils
Qu'en est-
$('li:contains("John"),li:contains("Mary")')
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;
};
Il est facile:
$("li:contains('John'):contains('Mary')")