追加 div “n”次，其中“n”是另一个 html div 中的值

Question

我有一个可以在其中包含不同数字的 div 和一个按钮。

当我点击这个按钮时，我想根据div中的数字追加div，例如如果我有数字 1，那么它应该附加 1 个 div，如果我有数字 2，它应该附加 2 个 div，依此类推。

我还希望*每个附加的 div 都有一个唯一的 id。

到目前为止我所尝试的：

$(document).ready(function() {
  $('button').click(function() {
    if ($(this).siblings('div').html() == '1') {
      $('body').append('<div>' + 'My div' + '</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  1
</div>

<button type="button">Add</button>

Answer 1

检查以下 纯 JavaScript 方法 [jsFiddle] 以及 jQuery 方法 [@987654322 @] 根据 div 值附加具有唯一 id 的 div：

---

纯 JavaScript：

var btn = document.getElementById('btn');
var val = document.getElementById('val').textContent;
var idName = 1;

function addDiv(){
  var count = parseInt(val.trim());  
  
  for (var i = 0; i < count; i++) {
    var appendDiv = document.createElement('div');
    appendDiv.setAttribute("class", "newDiv");
    appendDiv.setAttribute("id", "someId" + idName);
    document.body.appendChild(appendDiv);  
    idName++;
  }
}

btn.addEventListener('click', addDiv);

.newDiv {background-color: red; margin: 5px auto; padding: 10px;}

<div id="val">
  4
</div>

<button id="btn" type="button">Add</button>

---

jQuery:

var idName = 1;

$("button").on("click", function(){
  var count = parseInt($("#val").text().trim());
  
  for(let i=0; i < count; i++){
    $('body').append('<div class="newDiv" id="newDiv' + idName + '"></div>');
    idName++;
  }
})

.newDiv {
    background-color: red;
    margin: 5px auto;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="val">
  4
</div>

<button id="btn" type="button">Add</button>

Answer 2

我认为这样的事情可能对你有用：

<script>
    $(document).ready(function() {
      $('button').click(function() {
        var val = parseInt($(this).siblings('div').text().trim());
        for(let i=0; i < val; i++){
            $('body').append('<div>'+'TEST'+'</div>');
        }
      });
    });
</script>

Answer 3

您需要删除元素内容之前或之后的空白，并使用.trim() 执行此操作。

您还需要只查看前一个同级，而不是所有同级，因为在您再添加一个 div 后，它不会包含前一个 div 的数字，此后代码将永远找不到匹配项。

最后，当您查看元素的文本内容而不是其 HTML 子内容时，您应该使用 .text()，而不是 .html()。

$(document).ready(function() {

  // This is only added to demonstrate that the following 
  // code works no matter what the number is in the div
  let val = prompt("Pick a number");
  $("div")[0].textContent = " " + val + " ";
  // *****************************************************
  
  let div = $('button').prev();    // Get a reference to the <div> just prior to the button
  let num = +div.text().trim();    // Get the text content of that <div> and convert to number
  
  $('button').click(function() {
    // Loop the amount of times as was in the <div>
    for(var i = 0; i < num; i++) {
      // Create a new <div> with an id of the current loop index
      $('body').append('<div id=' + i + '>' + 'My div' + '</div>');
    }
    
    // Show newly created code (scroll to bottom of results to see)
    console.log($("body").html());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  
</div>

<button type="button">Add</button>