jQuery获得元素的先前位置

Question

我正在寻找一种方法来找出元素append之前的位置，我有50个元素应该附加到不同的元素上，但是在特定的语句中，问题是如何找到每个元素的先前位置？

$('#statment').change(function() {
  var val = $(this).val();
  if (val === "0") {
    $('#text1').appendTo('#target');
    $('#text2').appendTo('#target');
  } else if (val === "1") {
    $('#text1').appendTo('#old');
    $('#text2').appendTo('#old');
    // Detect previous place??
  }
});

#target {
    padding: 10px;
    border: 1px dashed red;
    width: 200px;
    margin-top: 10px;
}

#old {
    padding: 10px;
    border: 1px dashed blue;
    width: 200px;
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="statment" type="number" value="1" min="0" max="1" />

<div id="target"></div>

<div id="old">
<a id="text1">Text 1</a>
<a id="text2">Text 1</a>
</div>

这只是我的真实代码的示例，真实代码太大而无法共享。

我需要在else中而不是将每个元素重新带回旧的父级，而是要检测每个元素的先前位置。有可能吗？

$('#text1').appendTo('#target');，那么如何找到该元素的原点位置？

Answer 1

一种方法是，将元素移离原始位置时，将其保留在原始位置。就像一个空的<span>，其属性指向其中的元素。

这是如何工作的：

$('#statment').change(function() {
  var val = $(this).val();
  if (val === "0") {
    $('#text1,#text2').each(function () {
      // Only move the element when it is not yet within the target area
      if (!$(this).closest("#target").length) { 
        $(this).wrap($('<span>').attr("data-ref", this.id)).appendTo('#target');
      }
    });
  } else if (val === "1") {
    $('span[data-ref]').each(function () {
      $(this).replaceWith($('#' + $(this).data("ref")));
    });
  }
});

#target {
    padding: 10px;
    border: 1px dashed red;
    width: 200px;
    margin-top: 10px;
}

.old {
    padding: 10px;
    border: 1px dashed blue;
    width: 200px;
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="statment" type="number" value="1" min="0" max="1" />

<div id="target"></div>

<div class="old">
  <a id="text1">Text 1</a>
</div>
<div class="old">
  <a id="text2">Text 2</a>
</div>