用Javascript过滤数据 [英] Filtering data in Javascript

问题描述

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

I have a list of elements (DIVs) on my html page as below.

在同一页面上有一个#标签列表.

There is a list of hashtags on the same page.

我需要当用户单击主题标签(例如#bacteria)时，仅显示包含该主题标签的DIV.

I need that when the user clicks on the hashtag (e.g. #bacteria) only those DIVs that contain that hashtag are shown.

实现该目标的最轻便，最简单的方法是什么?

What would be the most lightweight and easy way to implement that?

<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之类的东西做到这一点...

I know that Angular is powerful for this kind of stuff, but I'd like to use something lightweight and easy. Like maybe it's possible to do it with jQuery or something...

仅供参考，整个过程都在具有EJS渲染的Node.Js/Express.Js上运行.

FYI the whole thing runs on Node.Js / Express.Js with EJS rendering.

谢谢！

更新

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

Suppose now I have several hashtags I need to check for. Like as if contains variable is not a string but an array and i need to only show entries that contain ALL of this array's values. How would I change the code? Trying to do that, but can't manage... Thank you so much!

推荐答案

使用:包含jquery选择器

$(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/

编辑

您可以使用带逗号的文本然后进行分割，或者将数据属性与一些分隔符一起使用，然后将其分割为串联的过滤器选择器

you can use text with commas and then split, or use data attribute with some separator and split it afterwards for a concatenated filter selector

$(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/

这篇关于用Javascript过滤数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！