Циклические значения в делениях при нажатии кнопки

Question

Я пытаюсь добавлять новые значения в элемент #current каждый раз, когда нажимается кнопка.Затем элемент #current передает это значение предыдущим элементам div.

Однако проблема, с которой я здесь сталкиваюсь, заключается в том, что я получаю значения и передаю их предыдущим элементам div, но значение на #current не меняется и остается неизменным до завершения цикла.

Я хочу, чтобы элемент #current получал новое значение при каждом нажатии кнопки, и это новое значение продолжает передаваться в prev деления.

// Click-1:
value out:
1:
2:
3:
4:
5:
new value every click: 1234

// Click-2:
value out:
1:
2:
3:
4:
5: 1234
new value every click: 2255

// Click-3:
value out:
1:
2:
3:
4: 1234
5: 2255
new value every click: 3245

// Click-4:
value out:
1:
2:
3: 1234
4: 2255
5: 3245
new value every click: 1413

Это код:

$('button').click(function() {
  var $target = $('div.active');
  if (!$target.length) {
    $('#current').text(Math.floor((Math.random() * 10000) + 1)).addClass('active');
  } else {
    $target.removeClass('active');
    $target.prev('div').addClass('active').text($target.text());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<br/><br/>
<div id="out">value out:</div>
<div id="1">1: </div>
<div id="2">2: </div>
<div id="3">3: </div>
<div id="4">4: </div>
<div id="5">5: </div>
<div id="current">new value every click:</div>

Вот ссылка JSFiddle: https://jsfiddle.net/a26s5oxg/2/

Заранее спасибо за ваше время и помощь

Answer 1

Чтобы достичь этого, вы можете циклически проходить через каждый div и устанавливать его текст в соответствии со следующим div.Если нет следующего div, то вы знаете, что находитесь в конце набора и вам нужно вместо этого сгенерировать новое случайное число.Попробуйте это:

$('button').click(function() {
  $('.container div span').each(function() {
    $(this).text(function() {
      var $target = $(this).parent().next('div').find('span');      
      return $target.length ? $target.text() : Math.floor((Math.random() * 10000) + 1);
    });
  });
});

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

<div class="container">
  <div id="out">value out: <span></span></div>
  <div id="1">1: <span></span></div>
  <div id="2">2: <span></span></div>
  <div id="3">3: <span></span></div>
  <div id="4">4: <span></span></div>
  <div id="5">5: <span></span></div>
  <div id="current">new value every click: <span></span></div>
</div>

Обратите внимание на добавление в HTML элементов <span />, чтобы упростить настройку значений.Если вы этого не сделали, вам придется копаться в текстовых узлах, что является ненужной сложностью.