javascript - 通过混合输入值在 DIV 内创建一个输入矩阵

Question

看看这个:

<div id="main">
    <div id="a">
       <input value="1" />
       <input value="2" />
       <input value="3" />
    </div> 
    <div id="b">
      <input value="4" />
      <input value="5" />
    </div> 
</div>

我需要获取 div#a 中的每个输入值和 div#b 中的每个输入值，并构建这些值的矩阵/混合，采用相同的示例和以前一样，这是代码应该返回的内容:

<div id="mixed">
    <input value="1" /><input value="4" />
    <input value="1" /><input value="5" />

    <input value="2" /><input value="4" />
    <input value="2" /><input value="5" />

    <input value="3" /><input value="4" />
    <input value="3" /><input value="5" />
</div>

我尝试使用以下代码移动到 div#main 内部:

    $("#main div").each(function() {
        var that = $(this);
        console.log("that.attr('id')");
    });

但是 console.log() 从不记录任何内容，所以我一定做错了什么。这对我来说是一个高级主题，需要一些帮助吗？

更新

此时我已经做到了:

$("#choices div").each(function() {
    var that = $(this);
    that.each(function() {
        var thati = $(this);
        console.log(thati);
    });
});

我认为在第二个 .each() 中我可以获取输入值并尝试构建矩阵

Answer 1

应该有帮助:

var arr = [];
$('#a input').each(function () {
  var that = $(this);
  $('#b input').each(function () {
    arr.push(that.val());
    arr.push($(this).val());
  });
});

然后遍历数组并动态生成 HTML。您可以将其视为矩阵，每 2 个值步进一次。