Question

编码新手...

我正在尝试使div克隆并最终单击单击在节容器中。但是，我希望它们的顺序保持原样，而不是它们在html中的位置。

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

我的问题是，如何相对于单击的顺序确定克隆的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。我已经更新了代码段。因此，我正在克隆使用特定类找到的第一个div，并将其附加到容器中，然后显示。还将其他“单击委托隐藏”隐藏移到了文档就绪功能内，因此现在也可以使用。

Answer 2

您可以使用insertAfter之类的attribute和[id=div1]选择器来代替#div1。

$(document).ready(function() {
  $("#showdiv1").click(function() {
    if ($("section [id=div1]").length > 1) {      
      $("#div1").clone(true).insertAfter($("section [id=div1]:last"));
    } else {
      $("section").append($("#div1").clone(true));
    }
    $("[id=div1]:not(:first)").fadeIn("500");
    $("[id=hidediv1]:not(:first)").fadeIn("500");
  });
});

$("#hidediv2").click(function() {
  $(this).closest("#div2").fadeOut("500");
});

$(document).ready(function() {
  $("#showdiv2").click(function() {
    if ($("section [id=div2]").length > 1) {      
      $("#div2").clone(true).insertAfter($("section [id=div2]:last"));
    } else {
      $("section").append($("#div2").clone(true));
    }
    $("[id=div2]:not(:first)").fadeIn("500");
    $("[id=hidediv2]:not(:first)").fadeIn("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>

jQuery：如何使克隆的div始终显示在容器的底部？

2 个答案: