我在DOM中有一个元素,我将其用作其他表单的模板,最终被克隆多次。由于所有的克隆,我有几个元素具有所有相同的Id。除了删除每个克隆上的id属性之外,我还想删除模板,因为它显示在页面视图中但没有任何内容。我的模板看起来像这样
模板克隆
<div id="listBody">
<div id="template" class="col-md-3 panel ">
<div class="panel-body">
<div class="embed-responsive embed-responsive-4by3 text-light">
<img class="courseImage embed-responsive-item" src="http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png" alt="cover">
<div class="embed-overlay"></div>
<div class="embed-bar embed-bar-bottom">
<div class="pull-right">
<i class="icon-calendar fa-fw"></i> Sep 12, 2015
</div>
<div>
<a href="#" class="visible mr-1x"><i class="visible icon-share fa-fw"></i> Share</a>
<a href="#" class="visible"><i class="icon-star visible fa-fw"></i> Favourites</a>
</div>
</div>
</div><!-- /.embed -->
<h4 class="templateName"><strong>@*Course name stuff goes in here*@</strong></h4>
<p class="help-block"><small>by: <a href="#" class="mr-2x templateInstructor">@*Instructor stuff goes in here*@</a> - <span class="ml-2x"><i class="fa fa-tag fa-fw"></i>@*Course TAGS stuff goes in here*@</span></small></p>
<p class="templateDescription" width="100px" text-overflow="elipses" overflow="hidden" white-space="nowrap" maxlength="200">@*Description stuff goes in here*@</p>
<a href="#" id="openModalButton" class="showModal btn btn-sm btn-link text-dark"><i class="fa fa-long-arrow-right fa-fw"></i> READ MORE</a>
</div><!-- /.panel-body -->
</div><!-- /.panel -->`
答案 0 :(得分:0)
问题的解决方案是
var $ templateClone = $('#templateParent')。find('。template')。clone(); $( '#coursesArea')附加($ templateClone);
我通过给它一个“隐藏”属性来隐藏(#templateParent)。 (#courseArea)只是我创建的一个容器,用于放置所有内容而不是(#listbody)。
让其他所有内容像上面一样运行,允许多个对象不具有相同的ID。