複数配列の総当たり処理
仕様
- 複数の要素でできた配列を総当たりに組み合わせる
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
See the Pen test018 by yambe jp (@yambejp) on CodePen.
動作確認
- IE9以上
- Edge40
- Firefox59
- Chrome65