逐个克隆div并重命名元素ID [英] Clone div and rename element ids incrementally
问题描述
< div id =card>
<！ - 第1部分 - >
< h1 class =card_build>建立您的卡片选项：< / h1>
<？php
include（'lib / class_dbcon.php'）;
$ connect = new doConnect（）;
$ q = mysql_query（SELECT * FROM country ORDER BY country_id ASC）;
while $（$ row = mysql_fetch_assoc（$ q））
{
echo'< option value =''。$ row ['country_id']。'>'。$ row [ 'country_option'] '< /选项>';
}
？>
< / select>
< select id =filtername =filter []>
< option value => - 选择过滤器 - < / option>
< / select>
< select id =load_choicename =load_choice []>
< option value => - 选择Load_choice - < / option>
< / select>
< option value => - 选择塑料 - < / option>
< / select>
< select id =UG_tippingname =UG_tipping []>
< option value => - 选择UG / Tipping - < / option>
< / select>
<！ - 第1部分 - >
<！ - 第2部分 - >
< div id =part2style =margin-top：10px;>
< h1 class =card_build>自订卡片：< / h1>
< input type =textname =3rdLinesize =32class =fieldid =3rdLine>
< input type =textname =4thLinesize =32class =fieldid =4thLine>
< input type =textname =card_valuesize =32class =fieldid =card_value>
< label for =showpoints>显示Points？< / label>
< input type =checkboxvalue =pointsclass =checkboxchecked =checked>
< label for =cobrand>联名？< / label>
< input type =checkboxvalue =cobrandclass =checkboxchecked =checked>
< hr>
< / div>
<！ - 第2部分 - >
< / div>
< a href =＃onCLick =moreFields（）> ADD< / a>
所以如果你看看这段代码，你最后点击ADD链接，它会重复并将它转换为并对div中的所有元素ID执行相同的操作。作品中的一个问题是我需要5个克隆的MAXIMUM，所以脚本只能增加4倍（或者5无关紧要，只要我能看到创建最大值的方法）。
我唯一的问题是，当克隆div时，PHP注入是否会保持原样？在此之前感谢，我一直在这一整晚都在扼杀我的大脑。
解决方案从你的代码中，我认为你的主要问题独特地访问这组下拉菜单而不会发生冲突。如果是这样的话，我认为这可以在没有增加创建的每个组的每个元素的id的压力的情况下实现。如果我要这样做，我会按如下方式处理它。
首先是DOM（示例）：
< div id =card>
< div class =group>
然后jquery：
$（function（）{
var newgroup = $（'< div>'）。addClass （组）;
$（'＃more'）。click（function（e）{
e.preventDefault（）;
$（'。group'）。first（）。clone（）。appendTo （newgroup）.appendTo（'＃card'）;
}）; $（'。group #country'）。live（'change'，function（）{
$（this）.parent（）。find（'＃filter'）。val （1）;
}）;
}）;
Ok lets say I have div with form elements inside of it. I want to be able to clone that div with a button click using jQuery and add a version 2 of the form, so ALL of the element IDs will increment by 1 in their name.
<div id="card">
<!-- PART 1 -->
<h1 class="card_build">Build your card options:</h1>
<select id="country" name="country[]">
<?php
include('lib/class_dbcon.php');
$connect = new doConnect();
$q = mysql_query("SELECT * FROM country ORDER BY country_id ASC");
while($row = mysql_fetch_assoc($q))
{
echo '<option value="'.$row['country_id'].'">'.$row['country_option'].'</option>';
}
?>
</select>
<select id="filter" name="filter[]">
<option value="">-- Select Filter --</option>
</select>
<select id="load_choice" name="load_choice[]">
<option value="">-- Select Load_choice --</option>
</select>
<select id="plastic" name="plastic[]">
<option value="">-- Select Plastic --</option>
</select>
<select id="UG_tipping" name="UG_tipping[]">
<option value="">-- Select UG/Tipping --</option>
</select>
<!-- PART 1 -->
<!-- PART 2 -->
<div id="part2" style="margin-top:10px;">
<h1 class="card_build">Customize the card:</h1>
<input type="text" name="3rdLine" size="32" class="field" id="3rdLine">
<input type="text" name="4thLine" size="32" class="field" id="4thLine">
<input type="text" name="card_value" size="32" class="field" id="card_value">
<label for="showpoints">Show "Points"?</label>
<input type="checkbox" value="points" class="checkbox" checked="checked">
<label for="cobrand">Co-branded?</label>
<input type="checkbox" value="cobrand" class="checkbox" checked="checked">
<textarea rows="5" name="message" class="textarea" id="message"></textarea>
<hr>
</div>
<!-- PART 2 -->
</div>
<a href="#" onCLick="moreFields()">ADD</a>
So if you look at this code and you were to click the ADD link at the end it would duplicate and turn it into and do the same thing to all of the element IDs inside the div as well. One wrench in the works is that I want a MAXIMUM of 5 clones, so the script can only increment 4 times (or 5 it doesn't really matter, as long as I can see a method to create a maximum).
My only other question is, will the PHP injection remain in tact when a div is cloned? Thanks in advance, I've been wracking my brain all night on this one.
From your code I think your main problem is accessing the group of dropdowns uniquely without conflict. If this is the case, I think that could be achieved without the stress of incrementing the id's of each element for every group created. If I were to do this, I would approach it as follows.
First the DOM (an example):
<div id="card">
<div class="group">
<select id="country" name="country[]">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="filter" name="filter[]">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<a id="more" href="">More</a>
Then the jquery:
$(function(){
var newgroup = $('<div>').addClass('group');
$('#more').click(function(e){
e.preventDefault();
$('.group').first().clone().appendTo(newgroup).appendTo('#card');
});
$('.group #country').live('change',function(){
$(this).parent().find('#filter').val(1);
});
});
这篇关于逐个克隆div并重命名元素ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
