在 Javascript 中过滤数据

Question

我的 html 页面上有一个元素列表 (DIV)，如下所示。

同一页面上有一个标签列表。

我需要当用户点击主题标签（例如#bacteria）时，只显示包含该主题标签的那些 DIV。

实现它的最轻量级和最简单的方法是什么？

<div class='entry'>
    <p>#antibiotics destroy #e-coli and that&#39;s not good!!!!</p>
    <!-- Hashtags: #antibiotics #eColi -->
    <!-- UID: 755a2a60-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#bacteria can be #friendly, such as #e-coli for example</p>
    <!-- Hashtags: #bacteria #friendly #eColi -->
    <!-- UID: 6cc66d00-972e-11e3-a464-872f2fc4dea2 -->
</div>

<div class='entry'>
    <p>#antibiotics can fight #bacteria</p>
    <!-- Hashtags: #antibiotics #bacteria -->
    <!-- UID: b37992c0-9686-11e3-8b2c-c97ae6645b3b -->
</div>

我知道 Angular 对这类东西很强大，但我想使用一些轻量且简单的东西。就像也许可以用 jQuery 或其他东西来做到这一点......

仅供参考，整个事情在 Node.Js / Express.Js 上运行，并带有 EJS 渲染。

谢谢！

更新

假设现在我需要检查几个主题标签。就像contains 变量不是字符串而是数组一样，我只需要显示包含该数组所有值的条目。我将如何更改代码？尝试这样做，但无法管理...非常感谢！

Answer 1

使用:contains jquery selector

$(document).ready(function(){
    $('.entry').hide();
    $('.links').on('click','a',function(e){
        var $ctx = $(e.target);
        var contains = $ctx.text();
        $('.entry').hide();
        $('.entry:contains('+contains+')').show();
        return false;
    });    
});

示例：http://jsfiddle.net/LA3tD/

编辑

您可以使用带逗号的文本然后拆分，或者使用带有分隔符的数据属性，然后将其拆分为串联的过滤器选择器

$(document).ready(function(){
    $('.entry').hide();
    $('.links').on('click','a',function(e){
        var $ctx = $(e.target);
        var contains = $ctx.text();
        $('.entry').hide();
        if(contains.indexOf(',')!=-1){
            var tags = contains.split(',');
            var filt = '';
            $.each(tags,function(i,el){
                filt += ':contains('+el+')';
            });
            // :contains can be concatenated multiple times f.e.: ":contains(foo):contains(bar)"
            $('.entry'+filt).show();
        }else{
            $('.entry:contains('+contains+')').show();
        };
        return false;
    });    
});

更新示例：http://jsfiddle.net/LA3tD/1/

Answer 2

理想情况下，您应该将您的标签数据合并到 div 本身中......也许使用 data-* 属性：

<div class='entry' data-hashtags='antibiotics bacteria'>

然后通过 jQuery 你可以遍历它们隐藏不匹配的那些：

var clickedHashtag = x //get the clicked on hashtag however you like

$('.entry').each(function(){
    if($(this).data('hashtags').indexOf(clickedHashtag)>=0){
        $(this).hide()
    }
})

小提琴：http://jsfiddle.net/Jz3gZ/

Answer 3

未经测试：

$('.entry').each(function(item) { $(item).show($item.is('.' + hashtag)); });

当然，您必须将主题标签添加为一个类：

<div class="entry antibiotics">