複数配列の総当たり処理

仕様

複数の要素でできた配列を総当たりに組み合わせる

var a=[['a1','a2','a3'],['b1','b2'],['c1','c2','c3','c4']];
var b=a[0]||[];//aが空配列の場合はbも空に
for(var i=0;i<a.length-1;i++){
  var tmp=[];
  for(var j=0;j<b.length;j++){
    for(var k=0;k<a[i+1].length;k++){
      tmp.push(b[j]+a[i+1][k]);
    }
  }
  b=tmp;
}
console.log(b);

※上記だと324=24通りのデータが表示される

応用

チェックボックスで選んだ仕様(value)にあせて、classで指定した表示を変更する

css

test018.css

#result div{display:inline-block;}
.big{font-size:1.5em;}
.reguler{font-size:1em;}
.small{font-size:0.7em;}
.red{color:red;}
.blue{color:blue;}
.yellow{color:yellow;}
.bg_aqua{background-Color:aqua;}
.bg_lime{background-Color:lime;}

javascript

test018.js

$(function(){
  $('[type=checkbox]').on('change',function(){
    if($('#size,#color,#bgColor').find('[type=checkbox]:checked').length==0){
      $('#result div').show();
    }else{
      var myList=[];//カテゴリごとの選択されたvalueをクラス名として格納
      ["size","color","bgColor"].forEach(function(x){
        if($('#'+x+' [type=checkbox]:checked').length>0){
          myList.push($('#'+x+' [type=checkbox]:checked').map(function(){return '.'+$(this).val();}).get()); 
        }
      });
      var classList=myList[0]||[];//クラス名の総当たり組み合わせを格納
      for(var i=0;i<myList.length-1;i++){
        if(classList.length==0) classList=myList[i];
        var tmp=[];
        for(var j=0;j<classList.length;j++){
          for(var k=0;k<myList[i+1].length;k++){
            tmp.push(classList[j]+myList[i+1][k]);
          }
        }
        classList=tmp;
      }
      $('#result div').hide().filter(classList.join(",")).show();
      /* クラス名が合致するものだけ表示 */
    }
  }).eq(0).trigger('change');
});

HTML

<html>
<head>
<title>複数配列の総当たり処理</title>
<link rel="stylesheet" type="text/css" href="test018.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test018.js"></script>
</head>
<body>
<h1>複数配列の総当たり処理</h1>
<div id="select" >
<div id="size">size:
<label><input type="checkbox" value="big">大きい</label>
<label><input type="checkbox" value="reguler">普通</label>
<label><input type="checkbox" value="small">小さい</label>
</div>
<div id="color">color:
<label><input type="checkbox" value="red">赤文字</label>
<label><input type="checkbox" value="blue">青文字</label>
<label><input type="checkbox" value="yellow">黄文字</label>
</div>   
<div id="bgColor">bgColor:
<label><input type="checkbox" value="bg_aqua">水色背景</label>
<label><input type="checkbox" value="bg_lime">黄緑背景</label>
</div>           
</div>
<hr>
<div id="result">
<div class="big red bg_aqua">大きい 赤文字 水色背景</div>
<div class="big yellow bg_lime">大きい 黄文字 黄緑背景</div>
<div class="reguler yellow bg_aqua">普通 黄文字 水色背景</div>
<div class="small blue bg_lime">小さい 青文字 黄緑背景</div>
<div class="reguler red bg_aqua">普通 赤文字 水色背景</div>
</div>
</body>
</html>

その他

sample

CodePen

See the Pen test018 by yambe jp (@yambejp) on CodePen.

動作確認

IE9以上
Edge40
Firefox59
Chrome65