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>将过滤.pin列表项为 的所有 div Red。

编辑：

我正在研究:contains()选择器。这合适吗？

.eachonclick 看看里面.pin是否包含<.li>Red</li> .show父 div？

谢谢你。

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

不确定哪个会更快...

（第二次编辑：对“lookingFor”变量使用了错误的文本......）

于 2012-07-31T06:12:27.227 回答
1

工作示例：

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();                               
                   });
         }
于 2012-07-31T06:16:31.560 回答