Как перемещать текст из одного div в другой при каждом запуске функции?

Question

Я пытаюсь переместить значение из одного деления в другое, когда функция запускается каждый раз.

Вот пример: когда myfunction() запускается в первый раз, он добавляет новый текст к #current,затем при следующем запуске myfunction() он копирует значение из #current и присваивает #5.После перехода к #5, #current получает новое значение, а остальные элементы продолжают передаваться до #out.

Я надеюсь, что это имеет смысл, и извините за плохой грамматик.

<div id="last_container">
    <div id="out" style="display: none;"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="current" style="display: none;"></div>
</div>

// first-run    
myFucntion() {
$("#last_container").appendTo('#current').append("1");  //1
}
// second-run
myFucntion() {
$("#last5").html($("#current").html());  //<div id="last5">1</div>
}
// third-run
myFucntion() {
$("#last4").html($("#last5").html());  //<div id="last4">1</div>
}

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

Любая помощь приветствуется и спасибо заранее.

Answer 1

Чтобы сделать то, что вам нужно, вы можете поместить класс в целевой элемент.Если этот класс недоступен в DOM, вы знаете, что это первый щелчок, и вместо этого вам нужно установить text() в #current.Если класс существует, вам нужно перейти к предыдущему элементу и установить вместо него text().Обратите внимание, что в приведенном ниже примере первый щелчок ничего не делает, поскольку он работает с скрытым элементом #current.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="last_container">
    <div id="out" style="display: none;"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="current" style="display: none;"></div>
</div>

<button>Click me</button>