Добавляйте div "n" раз, где "n" - это значение внутри другого html div

Question

У меня есть div, который может содержать разные цифры внутри, и кнопка.

Когда я нажимаю на эту кнопку, я хочу добавлять div в соответствии с числом в div ,например, если у меня есть номер 1, тогда он должен добавить 1 div, если у меня есть номер 2, он должен добавить 2 div и т. д.

Я также хочу, чтобы * каждый добавленный div имел уникальный идентификатор .

Что я пробовал до сих пор:

$(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

Вам нужно удалить пробел, который предшествует или следует за содержимым элемента, и вы делаете это с помощью .trim().

Вам также нужно смотреть только на предыдущего брата, а не на всех братьев, потому что послеВы добавляете еще один div, он не будет содержать число, которое делает предыдущий, и после этого код никогда не найдет совпадения.

Наконец, вы должны использовать .text(), а не .html(), когда выпросматривают текстовое содержимое элемента, а не его дочернее 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>

Answer 2

Проверьте следующее подход чистого JavaScript [ jsFiddle ], а также подход jQuery [ jsFiddle ] для добавления div с уникальными идентификаторами на основе значения 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

Я думаю, что-то вроде этого может работать для вас:

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