代码之家  ›  专栏  ›  技术社区  ›  Andy

按CSS标记筛选jQuery结果

  •  2
  • Andy  · 技术社区  · 16 年前

    我正在努力 动态地 过滤搜索结果。每个结果都有与之关联的标记,这些标记用作类。

    <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优化不是很熟悉,所以我正在尝试找到最有效的方法。

    1 回复  |  直到 16 年前
        1
  •  5
  •   VoteyDisciple    16 年前

    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 s与一体式选择器匹配。(请注意,我们已经将选择限制为 .search_results div