javascript - jQuery:如何让克隆的 div 始终出现在容器底部？

Question

编码新手...

我正在尝试让 div 进行克隆，并在单击时最终出现在部分容器中。但是，我希望它们的顺序与它们被点击时的顺序相同，而不是它们在 html 中的位置。

例如，在下面的代码中，单击“显示 div 2”，然后单击“显示 div 1”，请注意“div1”如何高于“div2”，即使先单击“显示 div 2”也是如此。

我的问题是，如何使克隆的 div 的位置相对于它被点击的顺序？

$(document).ready(function() {
  $("#showdiv1").click(function() {
    $("section").append($("#div1").clone(true));
    $("#div1").fadeIn("500");
    $("#hidediv1").fadeIn("500");
  });
});

$("#hidediv2").click(function() {

  $(this).closest("#div2").fadeOut("500");
});

$(document).ready(function() {
  $("#showdiv2").click(function() {
    $("section").append($("#div2").clone(true));
    $("#div2").fadeIn("500");
    $("#hidediv2").fadeIn("500");
  });
});

$("#hidediv2").click(function() {

  $(this).closest("#div2").fadeOut("500");
});

div {
  display: none;
}

#showdiv1, #div1 {
background-color:salmon;
}

#showdiv2, #div2 {
background-color:lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<section>
  <a class="button" id="showdiv1">Clone     Div 1</a>
  <a class="button" id="showdiv2">Clone     Div 2</a>
  <div id="div1">div 1 content<a id="hidediv1"> Hide Div</a></div>

  <div id="div2">div 2 content<a id="hidediv2"> Hide Div</a></div>
</section>

Answer 1

$(document).ready(function() {
  $("#showdiv1").click(function() {
    $(".div1").first().clone(true).appendTo("section").fadeIn("500");
  });
   $("#showdiv2").click(function() {
    $(".div2").first().clone(true).appendTo("section").fadeIn("500");
  });
  $(".hide").click(function() {
    $(this).closest("div").fadeOut("500").remove();
  });

});

div {
  display: none;
}

#showdiv1, .div1 {
background-color:salmon;
}

#showdiv2, .div2 {
background-color:lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>


<section>
  <a class="button" id="showdiv1">Clone Div 1</a>
  <a class="button" id="showdiv2">Clone Div 2</a>
  <div class="div1">div 1 content<a class="hide"> Hide Div</a></div>
  <div class="div2">div 2 content<a class="hide"> Hide Div</a></div>
</section>

我认为问题是当您真正应该使用类时却使用了 id 选择器和属性。第二次单击“showdiv1”链接会显示您正在克隆的隐藏 div，因为它是第一个使用 id 属性找到的。我已经更新了代码片段。所以我克隆了第一个在某个类中找到的 div，将其附加到容器中然后显示。还移动了文档就绪函数中的其他隐藏点击委托(delegate)，以便现在也可以使用。