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 个值步进来将其视为矩阵。

Answer 2

var a = $('#a input');
var b = $('#b input');
var html = '';
a.each(function () {
    var first = this;
    b.each(function () {
        html += '<div>' + first.outerHTML + this.outerHTML + '</div>'
    });
});

$('#mix').html(html);

jsFiddle在这里

更新：评论中要求的代码。

var divs = $('#main > div');

var html = '';
divs.each(function (index) {
    var divsLength = divs.length,
        inputs = $('input', divs[index]),
        inputsLength = inputs.length;

    for (var i = 0; i < divsLength; i++) {
        if (i === index) {
            continue;
        }

        for (var j = 0; j < inputsLength; j++) {
            $('input', divs[i]).each(function () {
                html += inputs[j].outerHTML + this.outerHTML + '<br />';
            });
        }
    }
});

$('#mix').html(html);