通过混合输入值，在 DIV 内制作一个包含输入的矩阵

Make a matrix with input inside a DIV by mixing input values

本文关键字：输入 一个 包含 混合 DIV      更新时间：2023-09-26

看看这个：

<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()中，我可以获取输入值并尝试构建矩阵

应该有帮助：

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

然后遍历数组并动态生成 HTML。您可以通过每 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);

js小提琴在这里

更新：注释中要求的内容的代码。

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);
相关文章：