jquery - 分隔具有相同类名的 div

Question

有没有办法分隔具有相同类名的 div？例如。

$(function() {
  $(".instancesN").change(function() {
    var value = $(this).val();
    $(".instancesNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($("div.instancesNSpecifics").html());
      $(".instancesNContainer").prepend(block);
    }
  });



  /*$(".instancesNContainer").on('change', '.usersvmaddnewdivsN', function() {
    var value = $(this).val();
    $(".usersvmaddnewdivsNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
    }
    $(this).parent().append($("div.usersvmaddnewdivsNSpecifics").html());
    $(".usersvmaddnewdivsNContainer").append(block);

  });*/

  $(this).on('change', ".usersvmaddnewdivsN", function() {
    var value = $(this).val();
    $(".usersvmaddnewdivsNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($(".usersvmaddnewdivsNSpecifics").html());
      $(".usersvmaddnewdivsNContainer").append(block);

    }


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' min="1" oninput="validity.valid||(value='1');" value="1" name='instancesN[]' placeholder="Instances #" class="instancesN form-control" />
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' placeholder="Add new Users" class="form-control usersvmaddnewdivsN" />
  <div class="usersvmaddnewdivsNContainer"></div>
  <div class='usersvmaddnewdivsNSpecifics'>


    <div class="form-row">
      <div class="col">
        <input type="text" class="form-control usernamevmN" name='usernamevmN[]' placeholder="VM-Username" />
      </div>
    </div>
  </div>
</div>

我的主要目标是创建不同的“用户”并拥有多个彼此独立的“VM-用户名”div。

见下图。我有 2 个 div“添加新用户”和 4 个“VM-用户名”。我的目标是有 2 个 div“添加新用户”和第一个“VM-用户名”只有 2 个 div，第二个“VM-用户名”有 4 个 div而这并没有发生！

标签： jqueryhtmlcontainers

Answer 1

您可以利用选择器上下文（参见https://api.jquery.com/jQuery/）来解决这个问题，只影响您感兴趣的 div。

$(this).on('change', ".usersvmaddnewdivsN", function() {
  var value = $(this).val();
  $(".usersvmaddnewdivsNContainer", $(this).parent()).empty(); // added: , $(this).parent()
  for (var i = 1; i < value; i++) {
    var block = $("<div>", {
      class: "block"
    });
    $(block).append($(".usersvmaddnewdivsNSpecifics").html());
    $(".usersvmaddnewdivsNContainer", $(this).parent()).append(block); // added: , $(this).parent()

  }


});