jQuery：如何使用 jQuery 过滤内容？答案

【问题标题】：jQuery: How to filter contents with jQuery?jQuery：如何使用 jQuery 过滤内容？
【发布时间】：2012-12-25 10:33:26
【问题描述】：

我有一个列表，其中包含我想通过开关（选择、单选、复选框）过滤并按字段（名称、日期、...）排序的项目。

下面的代码可以用于基本过滤，但这不是一个好方法。我想知道如何以专业的方式做到这一点。有什么好的 jQuery 插件吗？我不想要一个小部件，只是它背后的过滤/排序引擎。

# this code is pseudocode and not running! # 
<script>
// ready
$(function() {
    // get items
    var items = jQuery.parseJSON("items_json.php");

    // items filtered
    var items_filtered = new Array();

    // conditions/relations for filtering
    var filter1_relations = jQuery.parseJSON("filter1_relations.php");
    var filter2_relations = jQuery.parseJSON("filter2_relations.php");

    // build unfiltered list
    build_list(items);

    // build filtered list
    $(".filter").on("change", function() {
        items_filtered = run_filter1(items, filter1_relations);
        items_filtered = run_filter2(items_filtered, filter2_relations);
        build_list(items_filtered);
    });
});

// filters the 'items' by checking if a 'relation' exists
function run_filter1(items, relations) {
    items_filterd = new Array();
    $.each(items, function(key, item) {
        for (var i = 0; i < relations.length; i++) {
            if (...) {
                items_filtered.push(item);
            }
        }
    });
    return items_filtered;
}

// build list and add to #content
function build_list(items) {
    html = '<ul>';
    for (var i = 0; i < items.length; i++) {
        html += '<li>'+ items[i].name +'</li>';
    }
    html += '</ul>';

    $("#content").html(html);
}
</script>
Filter 1.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 1.2: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
Filter 2.1: <input type="checkbox" name="filter1_condition1" value="1" class="filter"/><br/>
<div id="content"></div>

我通过搜索 stackoverflow 找到了this code，但不是那么广泛。

提前致谢！

【问题讨论】：

有很多过滤插件...你试过搜索吗？
@charlietfl 是的，我做过，但有些过于广泛，有些则不然。我有点不知所措。
据我所知，所有可用的插件都只是以一种或另一种方式循环...如果我可以控制 json 并从数据库创建 json，我会寻找将提供数组的 db 查询javascript需要；否则，一个循环遍历数据以在接收时创建所有必需的数组（因此不必再次循环相同的数据）

标签： jquery json sorting filtering

【解决方案1】：

我刚刚使用KnockOut 实现了一个相当复杂的表单（有很多“如果选择此选项，这些项目应该变得可见”），这对于这类事情非常有用。

您需要在 KnockOut 视图模型中设置条件，然后您可以绑定这些条件，例如，仅在满足特定条件时才显示项目：

<input type="checkbox" data-bind="visible: filter1_condition1" value="1" class="filter"/>

【讨论】：

【解决方案2】：

一旦你有了数据（假设你不能在通过 sql 或 php 或两者发送服务器之前构造你的数据），而不是每次更改时循环，立即为每个过滤器创建数组

//loop data
//loop filter conditions
//if match
if (!filter_results[filter])   filter_results[filter]=new Array () 
filter_results[filter].push(data)

编辑：可以使用索引而不是推送（它更快）

var i = -1;

然后在循环中

filter_results[filter][++i]=data

（如果有很多索引，则为索引数组，创建新数组时创建新的））

所以是的，就像索引一样然后在更改时，您只需从好的数组创建您的 html

 var html='<ul><li>'+ filter_results[filterselected].join('</li><li>')+'</li></ul>'

一种或另一种方式，您必须循环通过，通过这种方式，您只需循环一次即可（不久前我不得不处理类似的 stg - 在每次通话时接收 100/200kb 的 pregzip 数据 - 经过大量思考/实验/评估内存使用情况后，我选择了这种方式）

【讨论】：