Question

我正在尝试创建过滤器/标记系统。这个answer运行良好，但使用的是类，而不是原始文本。大多数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>会过滤所有.pin div，其列表项为Red。

编辑：

我正在查看:contains()选择器。这个合适吗？

.each onclick在.pin内查看是否包含<.li>Red</li> .show父div？

谢谢。

Answer 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”变量的错误文本...）

Answer 2

工作示例：

http://jsfiddle.net/gVpqx/

但是，我真的建议使用类，更可靠。我放弃了插入a，因为它没有用处，只需在cursor: pointer上使用li阶梯就可以了。

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

按原始文本标记过滤内容

2 个答案: