Question

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

<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如下。

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++;

    });
});

如果您不单击“添加其他部分”，它将对主要详细信息部分很好地克隆。但是，当我单击“添加另一个”部分并尝试单击新创建的部分中的“添加主要内容”时，它将不起作用。有什么样的解决方案？任何帮助将不胜感激。

Answer 1

对于多行，请使用“ main_section”之类的类代替id。并在单击“添加主要”按钮时，使用 $（this）.parent（）.prev() ”将克隆附加到前一个兄弟“ main_section”中。

将是主要部分的jQuery代码。

    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);

完整代码。

 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

1 个答案: