javascript - 输入数值以追加div

Question

fiddle - 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>在输入框中指定。