JQuery: Contains Selector to Search for Multiple Strings
Assuming I Have: Mary John, Mary, Dave John, Dave, Mary John If I Need to Find All Elements Which Contain "John" and "Mary", How Would I Construct the jQuery?...
Assuming i have:
<li id="1">Mary</li>
<li id="2">John, Mary, Dave</li>
<li id="3">John, Dave, Mary</li>
<li id="4">John</li>
If i need to find all <li> Elements which contain "John" and "Mary", how would i construct the jQuery?
A search for a single string seems easy:
$('li:contains("John")').text()
I am looking for something like the following pseudo code:
$('li:contains("John")' && 'li:contains("Mary")').text()
Thanks!
4 Answers
Answer
To find li's that have text containing BOTH Mary AND John:
$('li:contains("Mary"):contains("John")')
To find li's that have text containing EITHER Mary OR John:
$('li:contains("Mary"), li:contains("John")')
Explanation
Just think of the :contains as if it was a class declaration, like .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
It's the same with :contains:
$('li:contains("Mary"):contains("John")'). // Both Mary AND John
$('li:contains("Mary"), li:contains("John")'). // Either Mary OR John
Demo
How about
$('li:contains("John"),li:contains("Mary")')
Answer
The correct syntax would be $("li:contains('John'),li:contains('Mary')").css("color","red")
But I found out that if you had many cases to test, jQuery will perform very badly (especially on IE6, I know, it's old but still in use). So I decided to write my own attribute filter.
This is how to use it: $("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;
};
It's easy:
$("li:contains('John'):contains('Mary')")
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
