克隆div并在相对父母的兄弟姐妹的最后一个孩子之后插入

Question

My markup like this:--

<div class="wrap">
    <div class="a"></div>
    <div class="a"></div>
    <button type="button">press</button>
</div>
.
.
.
<div class="wrap">
   <div class="z"></div>
   <button type="button">press</button>
</div>

I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .

Answer 1

You can use .before() to insert before the button and .prev() to clone the div above the button:

$('.wrap > button').on('click', function() {
    $(this).before( $(this).prev().clone() );
});

 $('.wrap > button').on('click', function() { $(this).before( $(this).prev().clone() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="a">A1</div> <div class="a">A2</div> <button type="button">press</button> </div> <div class="wrap"> <div class="z">Z1</div> <button type="button">press</button> </div> 

Answer 2

If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after() .

 $(".wrap button").click(function() { var prev = $(this).prev("div"); prev.after(prev.clone()); }); 

 div { margin: 5px; } .a { height: 100px; width: 100px; background-color: green; } .z { height: 100px; width: 100px; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrap"> <div class="a"></div> <button type="button">press</button> </div> <div class="wrap"> <div class="z"></div> <button type="button">press</button> </div> 

Answer 3

if i correctly understood problem

 $('button').on('click', function(){ var siblings = $(this).siblings(); siblings.last().clone().insertAfter(siblings.last() ) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrap"> <div class="a">a1</div> <div class="a">a2</div> <button type="button">press</button> </div> . . . <div class="wrap"> <div class="z">z1</div> <button type="button">press</button> </div>