複数の属性と複数の属性値に基づいて要素を表示/非表示するにはどうすればよいですか？

Question

属性フィルタに基づいて、ページ上でdivを表示/非表示したいと考えています。私は複数の値を持つことができるいくつかの属性を作った。ユーザーは表示したいものを選択することができます。

私は正しいalgorythmを得ることができません（または私はJavascript/jQuery機能を使用することができません）。以下は明らかに機能しません。私は最初にすべてのアイテムを表示していて、フィルタにループして、属性と一致しないものを隠します（読み込み：ループの現在の属性）。これは、後で属性に一致する可能性があるにもかかわらず、項目が非表示になることを意味します。

このフィルタメカニズムの動作を後で選択した属性に基づいて非表示にする必要はありませんループ？属性が('div[group=firstgroup|thirdgroup]')を選択して使用できるOR演算子がありますか？

Javascriptを：

$(document).ready(function() { 
     var items = $('#items').find('div'); 
     $(items).show(); 

     var groupsToShow = Array('firstgroup','thirdgroup'); 
     var namesToShow = Array('Fred','Pete'); 
     var applicationsToShow = Array('light'); 

     for(var i=0;i<groupsToShow;i++) { 
      $(items).find('div[group!='+groupsToShow[i]+']').hide();  
     } 

     for(var i=0;i<namesToShow;i++) { 
      $(items).find('div[name!='+namesToShow[i]+']').hide();  
     } 

     for(var i=0;i<applicationsToShow;i++) { 
      $(items).find('div[application!='+applicationsToShow[i]+']').hide();  
     } 
    }); 

HTMLコード：

<div id="items"> 
    <div group="firstgroup" name="Rob" application="special"></div> 
    <div group="firstgroup" name="Fred" application="light"></div> 
    <div group="secondgroup" name="Pete" application="special"></div> 
    <div group="thirdgroup" name="Pete" application="special"></div> 
    <div group="thirdgroup" name="Pete" application="light"></div> 
    <div group="secondgroup" name="Pete" application="normal"></div> 
    <div group="thirdgroup" name="Pete" application="special"></div> 
</div> 

Answer 1

として、私はそれを理解する、あなたは唯一のelemenが欲しいそれらが3つの配列すべてに含まれているものを満たす場合は表示されます。したがって、上記の状況では、2番目と5番目のDIVだけが表示されます...それは正しいですか？

私の仮定が正しければ、これは動作するはずです：

var show = { 
    'group': ['firstgroup','thirdgroup'], 
    'name': ['Fred','Pete'], 
    'application': ['light'] 
}; 

$('#items div') 
    .hide() 
    .filter(function(){ 
     // Only returns true for elements 
     // that satisfy all three arrays 
     for (var i in show) { 
      var attr = $(this).attr(i), 
       match = ('|' + show[i].join('|') + '|').indexOf(attr) > -1; 
      if (!match) { 
       return false; 
      } 
     } 
     // If we reach this point then we can assert 
     // that the element contains all required attributes 
     return true; 
    }) 
    .show(); 

Answer 2

あなたは）（追加使用して表示するように項目のリストを構築することができます。

$(document).ready(function() { 
    var items = $('#items').find('div'); 
    $(items).hide(); 

    var groupsToShow = ['firstgroup','thirdgroup']; 
    var namesToShow = ['Fred','Pete']; 
    var applicationsToShow = ['light']; 

    var $itemsToShow = $(); 

    for(var i=0;i<groupsToShow;i++) { 
     $itemsToShow = $itemsToShow.add('div[group='+groupsToShow[i]+']'); 
    } 

    for(var i=0;i<namesToShow;i++) { 
     $itemsToShow = $itemsToShow.add('div[name='+namesToShow[i]+']');  
    } 

    for(var i=0;i<applicationsToShow;i++) { 
     $itemsToShow = $itemsToShow.add(('div[application='+applicationsToShow[i]+']');  
    } 

    $itemsToShow.show(); 
});