通過CSS標記過濾jQuery結果

我正在嘗試動態過濾搜索結果。每個結果都有與其關聯的標籤，用作類。通過CSS標記過濾jQuery結果

<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優化不是很熟悉，所以我正試圖找到最有效的方法。

謝謝。

來源

2009-08-29 Andy

你可以做這樣的事情：

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，因此我們不需要遍歷文檔不止一次尋找這些文檔。）

來源

2009-08-30 00:10:43 VoteyDisciple

通過CSS標記過濾jQuery結果

回答

相關問題