对于在javascript中有两个数组的循环

Question

我是js的新手，有这个问题。我有两个数组，喜欢使用for循环实现这种布局。我不知道如何写这个来实现它。这是我的代码。请帮忙。

var html ='';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small', 'big', 'medium'];

for (var i in option){
    for ( var j in option_type){
        html += '<div>'+ option[i] + '</div>'+'<p>'+option_type[j]+'</p>';
    }
}

.(class).html(html);

Answer 1

您可以使用for之类的：

＆＃13;

＆＃13;

var html = '';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small'];

for (i = 0; i < option.length; i++) {
  html += '<div>' + option[i] + '</div>';        //Add option here (header)
  for (j = 0; j < option_type.length; j++) {
    html += '<p>' + option_type[j] + '</p>';     //Add option_type 
  }
}

$('body').html(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

对象数据结构更适合表示您想要的内容（至少基于屏幕截图）

var options = {
    meal: ['big', 'medium', 'small'],
    drink: ['big', 'medium']
}

var html = Object.keys(options).reduce((all, option) => {

    var headerMarkup = `<div>${option}</div>`;
    var itemsMarkup = options[option].map(item => `<p>${item}</p>`).join('');

    return `${all}${headerMarkup}${itemsMarkup}`;

}, '');

Answer 3

option_type没用，也不合逻辑，尝试这样的事情

var html ='';
var option = {
  'meal': [
    'big',
    'medium',
    'small'
  ],
  'drink': [
    'big',
    'medium'
  ]
};


for (var key in option){
    html += '<div>'+ key + '</div>'
    for ( var j of option[key]){
        html += '<p>'+j+'</p>';
    }
}

.(class).html(html);

Answer 4

这是如何使用嵌套for循环的直接答案。但是如果你想改变每个选项的option_types，你可能会想要使用scetiner建议的对象

var html ='';
var option = ['meal', 'drink'];
var option_type = ['big', 'medium', 'small'];

for (var i in option){
  html += '<div><h1>'+ option[i] + "<h1>";
    for ( var j in option_type){
      html +=  '<p>'+option_type[j]+'</p>';
    }
  html += '</div>';
}

document.getElementById('container').innerHTML = html;

#container{
  
}
h1{
}
#container p{
  display:inline-block;
  margin:10px;
  border:1px solid #333;
  min-width: 100px;
  padding:10px;
}

<div id='container'></div>

Answer 5

您可以这样做：

＆＃13;

＆＃13;

var html ='';

var option = [
  ['meal', 'big', 'medium', 'small'],
  ['drink', 'big', 'medium' ]
];

for (var i = 0; i < option.length; i++){
    var option_type = option[i];
    
    html += '<div>' + option_type[0] + '</div>';
    
    for(var j = 1; j < option_type.length; j++) {
         html += '<span>' + option_type[j] + '</span>';
    } 
}

document.getElementById('container').innerHTML=html;

＆＃13;

#container span{
     display:inline-block;
     margin-right:10px;
     border:1px solid #333;
     padding:10px;
}

＆＃13;

<div id="container"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

请按照此处的方法完成示例：https://jsfiddle.net/57q39xre/17/

关键是：

for (var i in parent){
//parent code
    for ( var j in child){
      //parent and child code 
    }    
  //parent code  
} 

每个家长都会迭代每个孩子。