ボタンをクリックすると、現在のmainDivに動的に作成されたdivを追加する方法

Question

ボタンをクリックすると、<div>をに追加しようとしています。クローン作成後、今度はすべて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>

Answer 1

あなたが$(this)を使っ府現在の要素を取得し、$(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>

Answer 2

私は正しい方法であなたの質問を理解していれば知っているが、現在のクローンを作成することはdivこの

(function($){ 
 

 
$(document).on('click', '.mainDiv > div', function(){ 
 
    $(this).closest('.mainDiv').append($(this).clone(true)); 
 
}); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
    <div class="div1">DIV 1</div> 
 
    <div class="div2">DIV 2</div> 
 
</div>

Answer 3

のように解決できるクリックされていません新しく作成したdivを正しい.mainDivに追加するには、次のように入力します

(function($) { 
 

 
    function div2(el) { 
 
    $('<div/>').addClass('div2').text('This is a Content').appendTo(el); 
 
    } 
 

 
    function cloneIt() { 
 
    $('.mainDiv').clone().detach().appendTo('body'); 
 
    } 
 

 
    $(document).on('click', '.div1', function() { 
 
    var el = $(this).parent('.mainDiv'); 
 
    div2(el); 
 
    }); 
 

 
    $(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; 
 
    cursour: 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> 
 
<div class="mainDiv"> 
 
    <span>Clone it</span> 
 
    <div class="div1">click to append div</div> 
 
</div> 
 
<div class="mainDiv"> 
 
    <span>Clone it</span> 
 
    <div class="div1">click to append div</div> 
 
</div>