Javascript嵌套.each（）函数

Question

我尝试创建一个计算器键盘。 Onclick功能正常工作。我的问题是.each（）功能。我怎样才能遍历我的buttonArray？我无法处理嵌套数组并将<p>追加到<div>，因为<input>附加到<p>。

我的脚本就像：

var buttonArray = [
  [{
      type: 'button',
      className: 'sil',
      value: 'C'
    }, {
      type: 'button',
      className: 'hepsiniSil',
      value: 'AC'
    },

  ],
  [{
    type: 'button',
    className: 'buttons',
    value: '7'
  }, {
    type: 'button',
    className: 'buttons',
    value: '8'
  }, {
    type: 'button',
    className: 'buttons',
    value: '9'
  }, {
    type: 'button',
    className: 'buttons',
    value: '*'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '4'
  }, {
    type: 'button',
    className: 'buttons',
    value: '5'
  }, {
    type: 'button',
    className: 'buttons',
    value: '6'
  }, {
    type: 'button',
    className: 'buttons',
    value: '-'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '1'
  }, {
    type: 'button',
    className: 'buttons',
    value: '2'
  }, {
    type: 'button',
    className: 'buttons',
    value: '3'
  }, {
    type: 'button',
    className: 'buttons',
    value: '+'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '0'
  }, {
    type: 'button',
    className: 'esit',
    value: '=',
    click: 'esittir'
  }, {
    type: 'button',
    className: 'buttons',
    value: '/'
  }]
]

$(document).ready(function() {
  $.each(function(index, buttonArray) {
    $("<p>").each(function(subIndex, subArrays) {
      $("<input>")
        .addClass(subArrays.className)
        .val(subArrays.val)
        .appendTo(this)
    });
  });
});

我希望这个输出：

<p>
  <input type="button" class="sil" value="C" style="width:50px">
  <input type="button" class="hepsiniSil" value="AC" style="width:50px">
</p>
<p>
  <input type="button" class="buttons" value="7">
  <input type="button" class="buttons" value="8">
  <input type="button" class="buttons" value="9">
  <input type="button" class="buttons" value="*">
</p>
<p>
  <input type="button" class="buttons" value="4">
  <input type="button" class="buttons" value="5">
  <input type="button" class="buttons" value="6">
  <input type="button" class="buttons" value="-">
</p>
<p>
  <input type="button" class="buttons" value="1">
  <input type="button" class="buttons" value="2">
  <input type="button" class="buttons" value="3">
  <input type="button" class="buttons" value="+">
</p>
<p>
  <input type="button" class="buttons" value="0">
  <input type="button" class="esit" value="=" style="width:50px" onclick='esittir()'>
  <input type="button" class="buttons" value="/">

</p>

Answer 1

$.each第一个参数是要迭代的数组，第二个是回调：

  

jQuery.each（array，callback）

回调将迭代项作为第二个参数返回：

  

回调

     

类型：Function（整数indexInArray，Object value）   将在每个对象上执行的函数。

此外this中的$.each()是该项的值，您无法附加到该项。

您需要迭代外部数组，创建一个<p>元素并将其附加到容器中。然后迭代子数组，创建<input>（或只是<button>元素），并将它们附加到<p>容器中：

＆＃13;

＆＃13;

var buttonArray = [
  [{
      type: 'button',
      className: 'sil',
      value: 'C'
    }, {
      type: 'button',
      className: 'hepsiniSil',
      value: 'AC'
    },

  ],
  [{
    type: 'button',
    className: 'buttons',
    value: '7'
  }, {
    type: 'button',
    className: 'buttons',
    value: '8'
  }, {
    type: 'button',
    className: 'buttons',
    value: '9'
  }, {
    type: 'button',
    className: 'buttons',
    value: '*'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '4'
  }, {
    type: 'button',
    className: 'buttons',
    value: '5'
  }, {
    type: 'button',
    className: 'buttons',
    value: '6'
  }, {
    type: 'button',
    className: 'buttons',
    value: '-'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '1'
  }, {
    type: 'button',
    className: 'buttons',
    value: '2'
  }, {
    type: 'button',
    className: 'buttons',
    value: '3'
  }, {
    type: 'button',
    className: 'buttons',
    value: '+'
  }],
  [{
    type: 'button',
    className: 'buttons',
    value: '0'
  }, {
    type: 'button',
    className: 'esit',
    value: '=',
    click: 'esittir'
  }, {
    type: 'button',
    className: 'buttons',
    value: '/'
  }]

];


var $calculator = $('#calculator');

$.each(buttonArray, function(index, buttons) {
  var $p = $('<p>').appendTo($calculator);

  $.each(buttons, function(subIndex, button) {
    $('<input>')
      .addClass(button.className)
      .prop('type', button.type)
      .val(button.value)
      .appendTo($p)
  });
});

＆＃13;

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

<div id="calculator"></div>

＆＃13;

＆＃13;

＆＃13;