如何更新div元素中html元素的id和名称? [英] How to update id and name of html element inside div element?
问题描述
我有以下的html代码。它由Razor引擎生成。这是动态的。我的意思是,下拉的元素不会因用户而异。我需要将此下拉列表复制到同一个下拉列表中,并使用新的id和新名称。我看过此处,这里,这里和这里。以下是我的html。我已在代码中添加注释以获得更多说明。
<! - 需要复制id和name模板的整个部分 - >< div id =template name =templateclass =form-group unique> < label class =control-label col-md-2for =课程>课程< / label> <! - 下面的下拉列表中包含id和名称为Course [0] .TitleI需要在[]内增加索引 - > < div class =col-md-10> < select class =form-control drop validid =Course [0] .Titlename =Course [0] .Title> < option value =1>统计信息< / option> < option value =2>三角函数< / option> < option value =3>生物学< / option> < option value =4>神经病学< / option> < option value =5>已应用< / option> < option value =6>理论< / option> < /选择> < / div>< / div>
跟随以下jQuery代码。它只复制一次,然后停止工作。我检查了控制台,没有错误。 javascript代码和澄清的注释如下。
< script src =〜/ Scripts / jquery-1.10.2.min.js> < / script>< script type =text / javascript> $(document).ready(function(){//复制类名为唯一的部分var clone = $('。unique')。clone(); //再次复制我修改的id,div的名称唯一类var clone2 = $('。unique')。clone(); //用1初始化索引,具有0索引的项目已经在网页中var i = 1; //更改名称,删除并分配新名称$(。unique).find(。drop).attr(name,Course [0] .Title); //更改具有类删除和分配的下拉列表的ID新的ID $(。unique).find(。drop).attr(id,Course [0] .Title); //点击加号按钮, div部分和新的id和名称$(#plus).click(function(){//在具有class unique $('。unique')。之后的元素后面添加(clone2); //在里面查找名字(。).attr(name,Course [+ i +] .Title); //查找唯一id并更新$( .uni (。).attr(id,Course [+ i +] .Title); //增加索引i = i + 1; }); });< / script>
?
这就是你想要的吗?设置 attr(name)
和 attr(id)
另外这里是我的代码,以便尽可能多地获得插入效果:
我克隆()
事件使它工作。
$(document).ready(函数(){
//用1初始化索引,0索引的项目已经存在于网页中
var i = 1;
$(#plus)。on('点击',function(){
//在具有类唯一
的元素后面添加clone clone(); $ b $(#template ).after(clone2);
$(clone2).attr('id',template+ i);
$(clone2).attr('name',template+ i) ;
//查找唯一名称并更新
$(clone2).find(。drop).attr(name,Course [+ i +] .Title);
//查找唯一id并更新
(clone2).find(。drop).attr(id,Course [+ i +] .Title);
//增加指数
i ++;
});
});
I have following html code. It is generated by Razor engine. This is dynamic. I mean the no of elements in drop down may vary according to user. I need to replicate this drop down exactly below the same drop down with new id and new name. I have looked here, here,here and here. Following is my html. I have added comments in code for more clarification.
<!-- the entire section with id and name template needs to be copied -->
<div id="template" name="template" class="form-group unique">
<label class="control-label col-md-2" for="Course">Course</label>
<!-- the drop down below has id and name as Course[0].Title
I need to increment index inside [] -->
<div class="col-md-10">
<select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
<option value="1">Statistics</option>
<option value="2">Trigonometry</option>
<option value="3">Biology</option>
<option value="4">Neurology</option>
<option value="5">Applied</option>
<option value="6">Theoretical</option>
</select>
</div>
</div>
Now I came up with following jQuery code. It copies only once and then stops working. I checked in console and there is no error. The javascript code with comments for clarification is as follows.
< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function () {
//copy the section with class name unique
var clone = $('.unique').clone();
//Copy again as i am modifying the id,name of div with unique class
var clone2 = $('.unique').clone();
//initialize the index with 1, the item with 0 index is already in webpage.
var i = 1;
//Change name of drop down who has class drop and assign new name
$(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
//Change id of drop down who has class drop and assign new id
$(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
//on click of plus button, i add clone of drop down with parent div section and with new id and name
$("#
plus ").click(function () {
//Add after the element which has class unique
$('.unique').after(clone2);
//Find name inside unique and update
$(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
//Find id inside unique and update
$(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
//Increment the index
i = i + 1;
});
});
</script>
Whats wrong in the script?
Is that what you wants ? There was some typo errors when setting attr("name")
and attr("id")
Also here's my code to get the insert works as much as you wants :
I clone the element in the click()
event to make it works.
$(document).ready(function () {
//initialize the index with 1, the item with 0 index is already in webpage.
var i = 1;
$("#plus").on('click', function () {
//Add after the element which has class unique
var clone2 = $('#template').clone();
$("#template").after(clone2);
$(clone2).attr('id',"template"+i);
$(clone2).attr('name',"template"+i);
//Find name inside unique and update
$(clone2).find(".drop ").attr("name", "Course[" + i + "].Title ");
//Find id inside unique and update
$(clone2).find(".drop ").attr("id", "Course[" + i + "].Title ");
//Increment the index
i++;
});
});
这篇关于如何更新div元素中html元素的id和名称?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!