JQuery: содержит селектор для поиска нескольких строк - PullRequest
59 голосов
/ 10 марта 2010

Если у меня есть:

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

Если мне нужно найти все

элементы, которые содержат «Джон» и «Мэри», как бы я сконструировал jQuery?

Поиск одной строки кажется простым:

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

Я ищу что-то вроде следующего псевдокода:

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

Спасибо!

Ответы [ 4 ]

106 голосов
/ 10 марта 2010

Ответ

Чтобы найти 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

7 голосов
/ 10 марта 2010

Как насчет

$('li:contains("John"),li:contains("Mary")')
5 голосов
/ 14 декабря 2011

Ответ

Правильный синтаксис: $("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;
};
1 голос
/ 26 марта 2012

Это просто:

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