输入数字的值以附加div

Question

小提琴 - http://liveweave.com/enRy3c

这就是我想要做的。

假设我的输入数字是5.我想动态地将5个div添加到类.enfants。但是我还没弄明白怎么做。我一直在搜索和搜索，我没有遇到过任何事情。

如果有人能提供帮助，我们将不胜感激。

JQuery的/ JavaScript的：

var counter = 1;

// Value number = .enfants children
$(".ajouter-enfants").on('keyup change', function() {
  var yourChildren = "<div>" + counter++ + "</div>";
  var CallAppend = function() {
    $(".enfants").append( yourChildren );
  };

  // If 0 or empty clear container
  if ( $.inArray($(this).val(), ["0", "", " "]) > -1 ) {
    $(".enfants").html("");
    // If only add/have 1 div in container
  } else if ($(this).val() === "1") {
    $(".enfants").html("").append( yourChildren );
    // If > 0 add as many divs as value says
  } else {
    $(".enfants").html("");
    CallAppend();
  }
});

HTML ：

<div class="contenu" align="center">
  <div>
    Value number = .enfants children
  </div>
  <input type="number" min="0" class="ajouter-enfants" value="0" />
  <div class="enfants">

  </div>
</div>

Answer 1

一个简单的循环怎么样？如果您只想追加，请尝试以下方法：

$(".ajouter-enfants").on('change', function() {
  var numDivs = $(this).val();
  var i;

  for (i = 1; i <= numDivs; i += 1) {
    $('.enfants').append('<div>' + i + '</div>');
  }
});

修改

如果你想替换而不是追加新创建的<div>，请尝试以下方法：

$(".ajouter-enfants").on('keyup change', function() {
  var content = '';
  var numDivs = $(this).val();
  var i;

  for (i = 1; i <= numDivs; i += 1) {
    content += '<div>' + i + '</div>';
  }

  $('.enfants').html(content);
});

这将使用类ajouter-enfants替换任何元素的整个内容，并在输入框中指定<div>的数量。

Answer 2

试试这个：

$(".ajouter-enfants").on('keyup change', function() {
    var num = +$.trim($(this).val()), target = $(".enfants"), i = 0, s = '';

    target.empty();
    if (!isNaN(num) && num > 0) {
        for (; i < num; i++) {
            s += '<div>' + (i + 1) + '</div>';
        }
        target.html(s);
    }
});