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。您可以通过逐步调整每个值来将其视为矩阵。

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 here

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

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);

通过混合输入值在DIV内部输入矩阵

2 个答案: