[英]how to append element in another each specific element
so I have a button to create/ append step div and each step has an add action button element.所以我有一个按钮来创建/ append 步骤 div 并且每个步骤都有一个添加操作按钮元素。
Question: how do I append action in a specific step for example if I add new action in step 2 then it will only create a new action in step 2问题:我如何在特定步骤中执行 append 操作,例如,如果我在步骤 2 中添加新操作,那么它只会在步骤 2 中创建新操作
Here is the link to what i did https://jsfiddle.net/noobnoob121212/306boevh/7/这是我所做的链接https://jsfiddle.net/noobnoob121212/306boevh/7/
so what i did to create new step is:所以我为创建新步骤所做的是:
enter code here
$(document).ready(function() {
$(".appendstep").click(function() {
$(".steplist").append(
'<div class="input-group mb-3">' +
'<div class="input-group-prepend">' +
'<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>'
+
'<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' +
'</div>' +
'<input type="text" class="form-control" placeholder="" aria-label="" aria-
describedby="basic-addon1">' +
' <div class="input-group-append">' +
'<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' +
'<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i>
</button>' +
'<button class="btn btn-warning" type="button" data-toggle="modal" data-
target="#actionmodal"><i class="bi bi-plus-circle-fill"></i>Action</button>' +
' </div>' +
'</div>'
)
});
});
html: html:
<div class="container scroll-container">
<div class="btn-group">
<button style="margin-top:10px" type="button" class="btn addstep btn-
light"
data-toggle="modal" data-target="#exampleModalCenter">
create new step
</button>
</div>
<div style="margin-top:20px" class="container steplist"> </div>
</div>
pop up modal to create new step:弹出模态以创建新步骤:
<!-- Modal Step-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true" <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">Cancel</button>
<button type="button" class="btn appendstep btn-
primary">Add</button>
</div>
</div>
</div>
</div>
action modal/ popup:动作模式/弹出:
<!-- Modal action -->
<div class="modal fade" id="actionmodal" tabindex="-2" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action=""></form>
<!-- MODAL HEADER -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add new Action</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="sel1">Action Name:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn appendaction btn-primary">Add</button>
</div>
</div>
</div>
</div>
Whenever actionmodal
is open you can save the index()
of div which has open that modal inside data-attribute.每当
actionmodal
打开时,您可以保存在 data-attribute 中打开该模态的 div 的index()
。 Then, when appendaction
button is clicked get the data-attribute and then use $(".steplist.input-group:eq(" + row_no + ")")..
to add new data inside your input-group div.然后,当单击
appendaction
按钮时,获取数据属性,然后使用$(".steplist.input-group:eq(" + row_no + ")")..
在输入组 div 中添加新数据。
Demo Code :演示代码:
$(document).ready(function() { $(".appendstep").click(function() { $(".steplist").append( '<div class="input-group mb-3">' + '<div class="input-group-prepend">' + '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-down"></i></button>' + '<button class="btn btn-dark" type="button"><i class="bi bi-arrow-up"></i></button>' + '</div>' + '<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">' + ' <div class="input-group-append">' + '<button class="btn btn-dark" type="button"><i class="bi bi-trash"></i></button>' + '<button class="btn btn-dark" type="button"><i class="bi bi-pencil-square"></i> </button>' + '<button class="btn btn-warning" type="button" data-toggle="modal" data-target="#actionmodal"><i class="bi bi-plus circle-fill"</i>Action</button>' + ' </div>' + '</div>' ) }); }); //on modal show.. $("#actionmodal").on("show.bs.modal", function(e) { //saving index value from where button is clicked $(this).attr("data-row", $(e.relatedTarget).closest(".input-group").index()) }) $(".appendaction").on("click", function() { var row_no = $("#actionmodal").attr("data-row") //get index,,which is store //now append new data there... $(".steplist.input-group:eq(" + row_no + ")").append("<h5>" + $("#sel1").val() + "</h5>"); $("#actionmodal").modal("hide"); })
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container scroll-container"> <div class="btn-group"> <button style="margin-top:10px" type="button" class="btn addstep btn-light" data-toggle="modal" data-target="#exampleModalCenter"> create new step </button> </div> <div style="margin-top:20px" class="container steplist"> </div> </div> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn appendstep btn- primary">Add</button> </div> </div> </div> <div class="modal fade" id="actionmodal" tabindex="-2" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <form action=""></form> <;-- MODAL HEADER --> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Add new Action</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×:</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="sel1">Action Name:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> <button type="button" class="btn appendaction btn-primary">Add</button> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.