使用jQuery分别克隆外部div和内部div [英] Clone outer div and inner div separately using jquery

问题描述

我需要使用jquery分别克隆main div和section div.

I need to clone both main div and section div separately using jquery.

<div class="container-fluid section">

    <div class="row2">
        <h4>
            Section Details
        </h4>

        <div id="main">
            <div class="row1">

                <div class="control-group">
                    <label for="caption">caption</label>
                    <input name="caption" id="caption" type="text">
                </div>

            </div>
        </div>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-space main click">Add Main</button>

        </div>
    </div>

</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-space sectionClick">Add Another Section</button>

</div>




 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

因此，当单击添加另一个节"按钮时，应克隆所有节div内容而没有输入值，而在单击添加主项"按钮时，应仅克隆主详细信息节而没有输入值.我的jQuery如下.

So when clicking the "Add Another Section" button it should clone all the section div content without input values and when clicking the Add Main button it should clone only the main detail section without input values. My jquery is as follows.

jQuery(function($){
    var unique_id = 0;
    jQuery('.sectionClick').on('click', function(){

        $(".section .row2:first").clone().find("h4,div,input,select").each(function() {
            this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
            this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
            this.value = '';  //male value empty of new row
            var fieldName = $(this).attr('name');
            $(this).siblings().attr('for', fieldName);
        }).end().appendTo(".section");
        unique_id++;
    });
});

jQuery(function($){
    var unique_id = 0;
    jQuery('.click').on('click', function(){
        $("#main .row1:first").clone().find("input,select").each(function() {

            this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
            this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
            this.value = '';  //male value empty of new row
            var fieldName = $(this).attr('name');
            $(this).siblings().attr('for', fieldName);
        }).end().appendTo("#main");
        unique_id++;

    });
});

如果您未单击添加其他部分"，它将对主要详细信息部分很好地克隆.但是，当我单击添加另一个"部分并尝试在新创建的部分中单击添加主要"时，它将无法工作.有什么样的解决方案?任何帮助将不胜感激.

It will clone fine for main detail section if you didn't click the "Add Another Section". But when I click the add another section and try to click "Add Main" in the newly created section it will not work. What kind of a solution is there? Any help would be highly appreciated.

推荐答案

对于多行，请使用"main_section"之类的类代替id.然后单击添加主要"按钮时，使用 $(this).parent().prev() ".

For multiple row use class like 'main_section' instead of id. and when click on 'Add Main' button append the clone to the immediately preceding sibling 'main_section' using $(this).parent().prev()'.

将是主要部分的jQuery代码.

jQuery code for main section will be.

    jQuery(function($){
        var unique_id = 0;
        var appendto = '';
        jQuery(document).on('click', 'button.click', function(){
        var appendto = $(this).parent().prev();
            $(this).parent().prev().find(".row1:first").clone().find("input,select").each(function() {
  -----
    }).end().appendTo(appendto);

完整代码.

Complete code.

 jQuery(function($){
var unique_id = 0;
jQuery('.sectionClick').on('click', function(){
    $(".section .row2:first").clone().find("h4,div,input,select").each(function() {
        this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
        this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
        this.value = '';  //make value empty of new row
        var fieldName = $(this).attr('name');
        $(this).siblings().attr('for', fieldName);
    }).end().appendTo(".section").find('.row1').not(':first').remove(); //append only first row, remove other 
    unique_id++;
});
});

jQuery(function($){
var unique_id = 0;
var appendto = '';
jQuery(document).on('click', 'button.click', function(){
    var appendto = $(this).parent().prev();
    $(this).parent().prev().find(".row1:first").clone().find("input,select").each(function() {

        this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
        this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
        this.value = '';  //make value empty of new row
        var fieldName = $(this).attr('name');
        $(this).siblings().attr('for', fieldName);
    }).end().appendTo(appendto);
    unique_id++;

});
});

 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <div class="container-fluid section">
	<div class="row2">
		<h4>
		Section Details
		</h4>
		<div id="main" class="main_section">
			<div class="row1">
				<div class="control-group">
					<label for="caption">caption</label>
					<input name="caption" id="caption" type="text">
				</div>
			</div>
		</div>
		<div class="btn-group" role="group" aria-label="Basic example">
			<button type="button" class="btn btn-space main click">Add Main</button>
		</div>
	</div>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-space sectionClick">Add Another Section</button>
</div>

这篇关于使用jQuery分别克隆外部div和内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！