克隆的div不能正确保留在网格中

问题描述

所以我在左边有一个按钮，右边有一个表格。如果您点击左侧的按钮，您最多可以创建6个表单。如果我手动在html中创建这些表单，所有东西都能正确显示但是，由于我克隆他们，他们似乎行事怪异。

例如，在第四个克隆中，按钮被按下而不是停留在左上角。

同样，每次克隆该部分时，我都会更新哪个表单的编号。但是，如何让他们留在网格内，我如何让他们留在升序的显示数量取决于？

谢谢！

  var cloneIndex = 1; 
 var clones_limit = 5; 
 var cloned_nbr = $（。clonedInput）。length-1; //排除默认（第一）div 
 
函数clone（）
 {
 if（cloned_nbr< clones_limit）
 {
 cloneIndex ++; 
 cloned_nbr ++; 
 
 var new_clone = $（。clonedInput）。first（）。clone（）; 
 
 new_clone.attr（id，clonedInput+ cloneIndex）; 
 new_clone.find（。label-nbr）。text（cloneIndex）; 
 new_clone.find（。category）。attr（id，category+ cloneIndex）; 
 new_clone.show（。remove）。attr（id，remove+ cloneIndex）; 
 new_clone.on（'click'，'button.clone'，clone）; 
 new_clone.on（'click'，'button.remove'，remove）; 
 
 $（。clone）。before（new_clone）; （）。
} 
 
函数remove（）{
 if（cloneIndex> 1）{
 $（this）.parents（.clonedInput）。remove（） ; 
 cloned_nbr--; 
 
 
 $（。clone）。on（click，clone）; （click，remove）; 
 
 $（。remove）。 
  

解决方案

我添加了 id =然后使用 $（＃formy）。append（new_clone）来添加克隆。这似乎让你的按钮保持在左上角，并保持克隆的顺序。

 < form id =formyonsubmit =return falsestyle =background：transparent; border-color：transparent ;> 
 
< div id =duplicater0class =clone flavNameDescBox addnewflavorimg col-4style =display：inline-block;> 
添加其他风味配置文件
< / div> 
 
< div id =clonedInputclass =clonedInput flavNameDescBox col-4style =display：inline-block; clear：left;> 
< h3> Create Flavor< / h3> 
< h4>调味配置文件< span class =label-nbr> 1< / span>< / h4> 
 
< fieldset> 
< input class =categoryid =category1placeholder =Your Web Site（optional）type =urltabindex =4required> 
< / fieldset> 
< fieldset> 
 < / fieldset> 
< fieldset> 
 < / fieldset> 
 
< button class =remove>移除< /按钮> 
< / div> 
< / form> 
 
< script> 
 
 var cloneIndex = 1; 
 var clones_limit = 5; 
 var cloned_nbr = $（。clonedInput）。length-1; //排除默认（第一）div 
 
函数clone（）
 {
 if（cloned_nbr< clones_limit）
 {
 cloneIndex ++; 
 cloned_nbr ++; 
 
 var new_clone = $（。clonedInput）。first（）。clone（）; 
 
 new_clone.attr（id，clonedInput+ cloneIndex）; 
 new_clone.find（。label-nbr）。text（cloneIndex）; 
 new_clone.find（。category）。attr（id，category+ cloneIndex）; 
 new_clone.show（。remove）。attr（id，remove+ cloneIndex）; 
 new_clone.on（'click'，'button.clone'，clone）; 
 new_clone.on（'click'，'button.remove'，remove）; 
 
 $（＃formy）。append（new_clone）; （）。
} 
 
函数remove（）{
 if（cloneIndex> 1）{
 $（this）.parents（.clonedInput）。remove（） ; 
 cloned_nbr--; 
 
 
 $（。clone）。on（click，clone）; （click，remove）; 
 
 $（。remove）。 
 
< / script> 
  




So I have a button on the left and a form on the right. If you click the button on the left you can create up to 6 forms. If i create these forms in html manually everything displays correctly. However since I am cloning them, they seem to be acting weird.

For example on about the 4th clone the button gets pushed down instead of staying at the top left.

Also each time the section is cloned i update the number of which form that is. But how do i make them stay inside the grid and how do i make them stay in ascending order depending on the number displayed?

Thanks!

JS FIDDLE

var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.show(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $(".clone").before(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$(".clone").on("click", clone);

$(".remove").on("click", remove);

解决方案

I added id="formy" to the form and then used $("#formy").append(new_clone) to add the clones. This seems to keep your button in the upper left and keep the clones in order.

<form id="formy" onsubmit="return false" style="background:transparent; border-color:transparent;">

<div id="duplicater0" class="clone flavNameDescBox addnewflavorimg col-4" style="display:inline-block;">
    ADD ANOTHER FLAVOR PROFILE
    </div>

  <div id="clonedInput" class="clonedInput flavNameDescBox col-4" style="display:inline-block; clear:left;">
    <h3>Create Flavor</h3>
    <h4>Flavor profile <span class="label-nbr">1</span></h4>

    <fieldset>
      <input class="category" id="category1" placeholder="Your Web Site (optional)" type="url" tabindex="4" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>
    <fieldset>
      <textarea class="textarea2" placeholder="Type your message here...." tabindex="5" required></textarea>
    </fieldset>

    <button class="remove">Remove</button>
  </div>
</form>

<script>

var cloneIndex = 1;
var clones_limit = 5;
var cloned_nbr = $(".clonedInput").length-1; //Exclude Default (first) div

function clone()
{
  if(cloned_nbr<clones_limit)
  {
    cloneIndex++;
    cloned_nbr++;

    var new_clone =  $(".clonedInput").first().clone();

    new_clone.attr("id", "clonedInput" +  cloneIndex);
    new_clone.find(".label-nbr").text(cloneIndex);
    new_clone.find(".category").attr("id","category"+cloneIndex);
    new_clone.show(".remove").attr("id","remove"+cloneIndex);
    new_clone.on('click', 'button.clone', clone);
    new_clone.on('click', 'button.remove', remove);

    $("#formy").append(new_clone);
  }
}
function remove(){
  if(cloneIndex>1){
    $(this).parents(".clonedInput").remove();
    cloned_nbr--;
  }
}
$(".clone").on("click", clone);

$(".remove").on("click", remove);

</script>

这篇关于克隆的div不能正确保留在网格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！