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