0

フィルタ/タグ付けシステムを作成しようとしています。この回答はうまく機能しますが、生のテキストではなくクラスを使用します。jqueryの並べ替え/フィルタリングのほとんどはクラスを使用しているようです。生のテキストを使用したいと思います。

私のhtmlはこのように設定されています。

<div class="pin">
<img src="/thumbnail.jpg" >
<span>10.08.12</span>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
</div>

タグは.li要素内にありますが、コンテンツのページをフィルタリングするリンクにしたいと思います。

<div class="pin">
<img src="/thumbnail.jpg" >
<span>10.08.12</span>
<ul>
<li><a href="#">Red</a></li>
<li><a href="#">Green</a></li>
<li><a href="#">Blue</a></li>
<li><a href="#">Yellow</a></li>
</ul>
</div>

.pin彼らがその特定のリストアイテムを持っているかどうかに基づいてのみ表示するための最良の方法は何ですか。たとえば、クリックすると、リストアイテムが。の<li><a href="#">Red</a></li>すべてのdivがフィルタリングされます。.pinRed

編集：

：contains（）セレクターを詳しく調べています。これは適切ですか？

.eachonclick親div.pinが含まれている場合は、内部を確認しますか？<.li>Red</li> .show

ありがとうございました。

4

2 に答える 2

1

これはあなたが探していることをするかもしれません...要素を反復処理するためにjqueryのみを使用しているため、「生のテキスト」自体のテストを行っています...

$(".pin a").click(function () {
    var lookingFor = $(this).text();
    $('.pin').hide();
    $('.pin li a').each(function (idx) {
        var $el = $(this);
        if ($el.text() === lookingFor) {
            $el.closest(".pin").show();
        }
    });
});

編集: jsFiddle に基づいて、これはアンカー タグを追加しなくても機能します ( cursor:pointer;CSS だけを使用できる場合、アンカー タグは不要であるというポスターに同意します。

$(".pin li").click(function() {
    var lookingFor = $(this).text();
    $('.pin').hide()
    $('.pin:contains(' + lookingFor + ')').show();
});

アンカー タグが必要な場合は、次のようにします。

$(".pin a").click(function() {
    var lookingFor = $(this).text();
    $('.pin').hide()
    $('.pin:contains(' + lookingFor + ')').show();
});

どちらが速いかはよくわかりません...

（2回目の編集：「lookingFor」変数に間違ったテキストを使用していました...）

于 2012-07-31T06:12:27.227 に答える
1

作業例:

http://jsfiddle.net/gVpqx/

ただし、クラスを使用することをお勧めします。より信頼性が高くなります。を挿入するのをやめました。目的がないため、框をa使用するだけで問題ありません。cursor: pointerli

$(document).ready(function()
             {
             $("li").each(function(x){
                 $(this).click(function()
                     {
                     var tagval = $(this).html();
                     filterDivs(tagval);
                     });       
                 });

             $("#showall").click(function(){$(".pin").show();});             
             });


function filterDivs(tag)
         {
         $(".pin").each(function(x)
                   {
                   var ch = $(this).children("ul").children();
                   var tagfound = false;
                       console.log(ch.length);
                   for (c=0; c<ch.length; c++)
                       {
                       if ($(ch[c]).html() == tag)
                           {
                           tagfound = true;
                           break;
                           }
                       }
                   if (tagfound)
                       $(this).show();
                   else
                       $(this).hide();                               
                   });
         }
于 2012-07-31T06:16:31.560 に答える