克隆的div不能正确保留在网格中 [英] Cloned divs are not staying in the grid correctly
本文介绍了克隆的div不能正确保留在网格中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
例如，在第四个克隆中，按钮被按下而不是停留在左上角。
同样，每次克隆该部分时，我都会更新哪个表单的编号。但是，如何让他们留在网格内，我如何让他们留在升序的显示数量取决于？
谢谢！
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!
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不能正确保留在网格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
