4

我正在使用以下 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 的元素。我的问题是，当 etag 是多个单词（并且我无法控制它。它来自数据库并且可能是多个单词与空格字符分隔的组合）时，代码不起作用..

有没有办法做到这一点？

4

4 回答 4

5

此过滤器检查给定字符串中的任何单词是否与元素的文本匹配。

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();

请参阅此处的示例。

于 2010-05-23T01:48:04.663 回答
3

您可以将其转换为一个函数，该函数接受由字符分隔的任意数量的单词，如下所示：

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>包含给定字符串中所有单词的元素。

于 2010-05-23T01:49:23.587 回答
1

另一种方法：

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(); 
    });
}​
于 2010-05-23T01:14:21.797 回答
0

稍微不同的方法 - 试试这个：

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

代码已更新。有点低效，但它应该做的工作。

于 2010-05-23T01:03:20.580 回答