jquery - 通过CSS标签过滤jQuery结果

标签 jquery optimization

我正在尝试动态过滤搜索结果。每个结果都有与之关联的用作类的标签。

<div class="search_results">
    <div class="html php jquery">
        I can do HTML, PHP and JQuery.
    </div>

    <div class="jquery asp pascal">
        I can do jQuery, ASP, and Pascal.
    </div>

    <div class="php basic webOS">
        I am a PHP, Visual Basic, and WebOS expert.
    </div>
</div>


我想根据标签动态选择结果。我了解如何静态执行此操作:

/* Hide all search results */
jQuery(".search_results div").hide(); 

/* Show everything with .php and .jquery tags */
jQuery(".search_results .php, .search_results .jquery").show()


但是,我需要根据复选框列表动态地进行此操作。

<div class="filters">
    <input type="checkbox" value="php" />
    <input type="checkbox" value="jquery" />
    <input type="checkbox" value="webOS" />
    etc..
</div>


选中这些框后,我要过滤结果。

我的问题:我将使用什么功能执行此操作?每个页面结果都有不同的标签集合。会是这样吗?

// Create new array
var filter_array = new Array();

// wait for a filter checkbox to be clicked
jQuery(".filters input").click(function() {

    // Cycle through all input fields, and focus only on checked ones
    jQuery('.filters input:checked').each( function() {

        // Add current value to array
        filter_array.push(jQuery(this).val());

    });

    // Now filter the results
    for(i=0; i< filter_array.length;i++) {

        // Hide all results
        jQuery(".search_results div").hide(); /* Hide all search results */

        // What do I do here to make sure elements that are dipslayed meet all the filter criteria?

    }

});


另外,我是否必须使用循环功能?有没有办法更快地做到这一点?假设我在一页上可以有多达50-100个结果元素。我对jQuery优化不是很熟悉,所以我试图找到最有效的方法。

谢谢。

最佳答案

您可以执行以下操作:

jQuery('.filters input:checked').each( function() {

    // Add current value to array
    filter_array.push(jQuery(this).val());

});

jQuery(".search_results div").hide().filter('.' + filter_array.join(',.')).show();


这将构造一个类似于.jquery,.php,.python的字符串,然后显示与该多合一选择器匹配的div。 (请注意,我们已经将选择限制为.search_results div,因此我们无需遍历文档就可以遍历所有文档。)

关于jquery - 通过CSS标签过滤jQuery结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1352658/

相关文章:

javascript - 将变量传递给jQuery函数

c++ - C/C++编译器可以以任何方式内联C回调函数吗?

c - SSE 内部函数 : Fastest way to test for all 0s or 1s?

optimization - R 优化 : How can I avoid a for loop in this situation?

mysql - MySQL-帮助优化查询

javascript - 溢出不包含div内容

javascript - 无法显示带有 asp.net mvc url.action 链接的 Bootstrap 对话框

javascript - 编写一个jQuery函数以重用公式

javascript - 向Snap.js移动面板插件添加`destroy`方法

sql - 我怎样才能摆脱这个查询中的 'ORA-01489: result of string concatenation is too long' ?