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>

3 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：-1)

Answer 1

我认为类似这样的方法可能对您有用：

<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 2

检查以下 纯JavaScript方法 [jsFiddle]和 jQuery方法 [ jsFiddle]根据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 3

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

您还只需要查看前一个同级，而不是所有同级，因为在再添加一个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>

将div附加“ n”次，其中“ n”是另一个html div

3 个答案:

纯JavaScript：

jQuery：