2
私はを動的に試みていますフィルタ検索結果。すべての結果には、クラスとして使用されるタグが関連付けられています。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?
}
});
また、ループ機能を使用する必要がありますか？これをより速く行う方法はありますか？ 1ページに50-100個の結果要素を持つことができたとします。私はjQueryの最適化に慣れていないので、これを行う最も効率的な方法を見つけようとしています。
ありがとうございました。これは.jquery,.php,.pythonのような文字列を構築し、その後、div Sマッチングオールインワンのセレクタを示し
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();
：