javascript - 如何动态追加到2列

Question

我有很多输入，我想要一个解决方案来创建一行 2 列，然后将输入一一附加到它们(因此每一侧都是 50%，除非它们不相等)。

Atm 正在创建许多行。我该怎么做？

$.each(inputs, function (index, input) {
    $(".modal-body").append('<div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div>');
 }

Answer 1

您可以使用.wrap() ，然后 .after() .

$('input[type="text"]').wrap('<div class="first-col"></div>');
$('.first-col').after('<div class="second-col"></div>');

*{
  margin: 0;
  padding: 0;
}

.first-col{
  display: inline-block;
  background: blue;
  height: 30px;
  width: 200px;
  margin: 20px 0 20px 0;
}

.second-col{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: green;
}

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

<input type="text" id="fst"/><hr/>
<input type="text" id="snd"/><hr/>
<input type="text" id="trd"/><hr/>
<input type="text" id="frt"/><hr/>