我正在尝试附加到 <div>
进入当前 <div class='mainDiv'>
单击按钮时。现在它附加到所有 class='mainDiv'
& 克隆后。我只需要当前点击的 <div>
.有人可以帮我解决吗?
(function($) {
function div2() {
$('<div/>').addClass('div2').text('This is a Content').appendTo('.mainDiv');
}
function cloneIt() {
$('.mainDiv').clone().detach().appendTo('body');
}
$(document).on('click', '.div1', function() {
div2();
});
$(document).on('click', 'span', function() {
cloneIt();
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
height: 100px;
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursor: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
span {
display: block;
padding: 10px;
background-color: green;
margin-bottom: 15px;
cursor: pointer;
}
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
最佳答案
您可以使用 $(this)
获取当前元素 bu,然后使用 $(this).parent()
获取父元素并将其作为参数发送给函数 div2($(this).parent());
并使用它而不是使用类选择器
function div2(item) {
$('<div/>').addClass('div2').text('This is a Content').appendTo(item);
}
查看代码片段:
(function($) {
function div2(item) {
if (item.has(".div2").length <= 0) {
$('<div/>').addClass('div2').text('This is a Content').appendTo(item);
}
}
function cloneIt() {
$('.mainDiv').clone().detach().appendTo('body');
}
$(document).on('click', '.div1', function() {
div2($(this).parent());
});
$(document).on('click', 'span', function() {
cloneIt();
});
})(jQuery);
body {
display: flex;
justify-content: space-around;
}
.mainDiv {
background-color: #000;
width: 100px;
height: 100px;
color: #fff;
padding: 20px;
margin-left: 15px;
margin-right: 15px;
}
.div1 {
background-color: blue;
padding: 10px;
cursor: pointer;
}
.div2 {
background-color: red;
padding: 10px;
}
span {
display: block;
padding: 10px;
background-color: green;
margin-bottom: 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<span>Clone it</span>
<div class="div1">click to append div</div>
</div>
关于javascript - 单击按钮时如何将动态创建的 div 附加到当前 mainDiv 而不是所有 mainDiv,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44386110/