使用jQuery進行高級過濾，需要最佳方向

我需要關於在jQuery中進行一些過濾的最佳方法的建議。使用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的

當任何輸入[名稱= FILTER]點擊，我建立的所有名單輸入[名稱= FILTER]：檢查。
我在循環所有div
在循環過程中，我檢查該div上的attrList屬性（例如attrList =「red」）以查看是否在該列表中找到了被單擊的內容。
如果沒有找到我移動DIV的視線到不同的div

JSBin例

上面的例子已被簡化，所以你可以看到什麼樣的基礎知識我在做。 JSBin Link Here

需要你的意見

這是我第一次去這樣做這種過濾;我只是從以前來過的人那裏尋找最佳做法。我真的很感激你的反饋！

來源

2010-11-22 jyoseph

如果您可以將您的問題限制在100個字或更少，儘可能少的代碼仍然可以證明問題，那麼您在這裏的成功機會將大大增加。 – ken 2010-11-22 16:33:54

您應該考慮使用jQuery的data（）方法代替attrList =「...」....鏈接1：http：//api.jquery.com/data/鏈接2：http：//api.jquery .com/jQuery.data/ – ken 2010-11-22 16:37:41

這是我的頭頂，沒有經過測試或優化。但是像這樣的東西應該工作。

//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/

編輯：這是你會怎麼做。數據$，而不是類似的事情（這僅僅是一個更好在屬性中存儲數據的方式）。

//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>

來源

2010-11-22 19:07:50

使用jQuery進行高級過濾，需要最佳方向

回答

相關問題