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に1つの単語がある限り、コードは完全に機能し、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();
      });
    });

ブラウザで書かれているので、バグがあればごめんなさい！

-編集-

実際、質問を読み直しましたが、そのコードは機能しません。最初に動作を定義する必要があります-リストにはすべてのタグが含まれている必要がありますか、それとも表示されるタグの1つだけが含まれている必要がありますか？

-編集2-

コードが更新されました。一種の非効率的ですが、それは仕事をする必要があります。

于 2010-05-23T01:03:20.580 に答える