jQueryによる高度なフィルタリング、最良の方法での方向性が必要

Question

jQueryでフィルタリングを行う最良の方法についてアドバイスが必要です。

HTML

私は属性のunorderdリストを含むフォームを持っている：

<form name="attrList"> 

    <ul> 
     <li> 
      <input type="checkbox" name="FILTER" value="1+" /> 1+ 
     </li> 
     <li> 
      <input type="checkbox" name="FILTER" value="Adrian Chesterman" /> Adrian Chesterman 
     </li> 
     <li> 
      <input type="checkbox" name="FILTER" value="Green" /> Green 
     </li> 
    </ul> 

</form> 

は、その後、私はdiv要素のセットを持っています。私は、DIV "attrListは" の属性を与えたので、のような：

<div class="productContainer" attrList="1+,Andy Thomas"> 
    <h3>Some Name Here</h3> 
    <ul> 
     <li>1+</li> 
     <li>Andy Thomas</li> 
    </ul> 
</div> 

jQueryの

1. 任意の入力[名前= FILTER]をクリックすると、私はすべてのリストを作成していた場合入力[name = FILTER]：チェックされています。
2. すべてのdivをループしています
3. ループ中に、そのリストのattrList属性（attrList = "red"など）をチェックして、そのリスト内でクリックされたものが見つかったかどうかを確認します。
4. 私はあなたが何の基礎を見ることができるので、上記の例は単純化された別のdivの

JSBin例

に視界の外のdivを動かしてる見つからない場合私はやっていた。 JSBin Link Here

これは私がフィルタリングのこの種をやって行ってきたの初めてですあなたのアドバイス

が必要です。私はこれまでにここにいた人からベストプラクティスを探しています。私はあなたのフィードバックに本当に感謝しています！

Answer 1

これは私の頭の上から外れています。テストや最適化はされていません。しかし、このようなものはうまくいくはずです。

//Hide divs with tag value 
function hide_stuff(tag_value) 
{ 
    $(".productContainer") 
    .filter('[attrList*="'+tag_value+'"]') 
    .each(function(i){ 
     $(this).hide() 
    } 
); 
} 
//Bind events to form 
$("form[name='attrList'] input[name='FILTER']").live('change', function(evt){ 
    if($(this).is(':checked')){ 
    var tag = $(this).val(); //e.g. 'Andy Thomas' 
    hide_stuff(tag); 
    } 
}); 

あなたも中間jQueryの作業を行う上で計画している場合、このページはhttp://api.jquery.com/category/selectors/

編集を読み取る必要があります：ここだけ優れている（あなたの代わりに$ .dataのと同様のことをするだろう方法です属性にデータを格納する方法）。

//Hide divs with tag value 
function hide_stuff(tag_value) 
{ 
    $(".productContainer").filter(function() { 
     return $.inArray(tag_value, $(this).data('tags')); //e.g.'Andy Thomas' is 'tags' data 
    } 
    ) 
    .each(function(i){ 
     $(this).hide() 
    } 
); 
} 
//Bind events to form 
$("form[name='attrList'] input[name='FILTER']").live('change', function(evt){ 
    if($(this).is(':checked')){ 
    var tag = $(this).val(); //e.g. 'Andy Thomas' 
    hide_stuff(tag); 
    } 
}); 
//jQuery 1.4.3+ only - http://api.jquery.com/data/ 
<div class="productContainer" data-tags="[1+, Andy Thomas]"> 
    <h3>Some Name Here</h3> 
    <ul> 
     <li>1+</li> 
     <li>Andy Thomas</li> 
    </ul> 
</div>