: содержит несколько слов - PullRequest
Новая
       5

: содержит несколько слов

4 голосов
/ 23 мая 2010

Я использую следующий jQuery 

var etag = 'kate'
if (etag.length > 0) {
    $('div').each(function () {
        $(this).find('ul:not(:contains(' + etag + '))').hide();
        $(this).find('ul:contains(' + etag + ')').show();
    });
}​

по отношению к следующему HTML 

<div id="2">
<ul>
  <li>john</li>
  <li>jack</li>
</ul>
<ul>
  <li>kate</li>
  <li>clair</li>
</ul>
<ul>
  <li>hugo</li>
  <li>desmond</li>
</ul>  
<ul>
  <li>said</li>
  <li>jacob</li>
</ul>
  </div>

    <div id="3">
<ul>
  <li>jacob</li>
  <li>me</li>
</ul>
<ul>
  <li>desmond</li>
  <li>george</li>
</ul>
<ul>
  <li>allen</li>
  <li>kate</li>
</ul>  
<ul>
  <li>salkldf</li>
  <li>3kl44</li>
</ul>
</div>

в основном, если в etag есть одно слово, код работает отлично и скрывает те элементы, которыене содержат этаг.Моя проблема в том, что когда etag состоит из нескольких слов (и я не могу его контролировать. Он приходит из базы данных и может быть комбинацией нескольких слов, разделенных пробелом), тогда код не работает ..

есть ли способ добиться этого?

Ответы [ 4 ]

5 голосов
/ 23 мая 2010

Этот фильтр проверяет, совпадают ли какие-либо слова в данной строке с текстом элемента. 

jQuery.expr[':'].containsAny = function(element, index, match) {
    var words = match[3].split(/\s+/);
    var text = $(element).text();
    var results = $.map(words, function(word) {
        return text === word;
    });
    return $.inArray(true, results) !== -1;
};

Показать и скрыть как: 

$('ul').hide();
$('li:containsAny(john kate)').parents('ul').show();

См. Пример здесь .

3 голосов
/ 23 мая 2010

Вы можете превратить это в функцию, которая принимает любое количество слов, разделенных символом, например: 

function filter(words) {
    var uls = $('div ul').hide();
    $.each(words.split(' '), function(i, v) {
        uls = uls.filter(':contains(' + v + ')');
    });
    uls.show();
}

//sample call
var etag='kate clair'
filter(etag);

Вы можете увидеть рабочую демонстрацию здесь

Находит <ul> элементов, которые содержат все слова в данной строке.

1 голос
/ 23 мая 2010

Другой подход: 

var etag='Some text from server';

if (etag.length > 0) {
    $('div ul').each(function () {
        var el = $(this); // Local reference
        (el.html() === etag) ? el.show() : el.hide(); 
    });
}​
0 голосов
/ 23 мая 2010

Немного другой подход - попробуйте это: 

    var etag='kate test blah';

    var tags = etag.split(' ');
    $('div ul').each(function () {
      var list = $(this);
      list.hide();
      list.children('li').each(function() {
        var item = $(this);
        if ($.inArray(item.html(), tags) >= 0) list.show();
      });
    });

Написано в браузере, так что извините, если есть какие-либо ошибки!

- редактировать -

На самом деле, я перечитал вопрос, и этот код не будет работать. Сначала нужно определить поведение - должен ли список содержать все теги или только один из отображаемых тегов?

- редактировать 2 -

Код обновлен. Вид неэффективен, но он должен делать свою работу.

...