jQuery select each element from one div and paste into each another

Question

I need jQuery function for selecting each "a" html code from one div and paste it into each another li.

Copy from this div each "a"

    <div class="copy-from-this-div">
            <a href="#" target="_blank">
                <img src="#">
            </a>
            <a href="#" target="_blank">
                <img src="#">
            </a>
            <a href="#" target="_blank">
                <img src="#">
            </a>
    </div>

Paste into this each li :

<ul class="paste-into-this-div">
   <li class="images" ></li>
   <li class="images" ></li>
   <li class="images" ></li>

</ul>

And in a conclusion I need to remove first div .

This is what I tried to make, but it doesnt work.

$('.paste-into-this-div').each(function(s, slider){
var $slider = $(slider);

$('.copy-from-this-div').each(function(i, select){
    var $select = $(select);
    $select.find('a').each(function(j, option){
        var $option = $(option);

$slider.append($option);    

    });
    $select.remove();
});  
});  

Answer 1

First thing your are trying to appending a element inside ul element it wouldn't be see in the page.

Optimized way https://jsfiddle.net/zyz3qymn/2/

$('.copy-from-this-div a').each(function(i, select){
  $('.paste-into-this-div').find('li')[i].append(select);    
});  

We can do like this also https://jsfiddle.net/zyz3qymn/1/

$('.copy-from-this-div').each(function(i, select){
    var $select = $(select);
    $select.find('a').each(function(j, option){
        $('.paste-into-this-div').find('li')[j].append(option);    
                $select.remove();
    });

}); 

Answer 2

Consider a pure JavaScript solution, a bit clearer.

 var div = document.querySelector('.copy-from-this-div'); var a = div.querySelectorAll('a'); var li = document.querySelectorAll('.paste-into-this-div li'); for (var i = 0; i < li.length; i++) { li[i].appendChild(a[i]); } div.parentNode.removeChild(div); 

 <div class="copy-from-this-div"> <a href="#" target="_blank"> <img src="#"> </a> <a href="#" target="_blank"> <img src="#"> </a> <a href="#" target="_blank"> <img src="#"> </a> </div> <ul class="paste-into-this-div"> <li class="images"></li> <li class="images"></li> <li class="images"></li> </ul> 

Answer 3

Easy peasy

 $(document).ready(function() { $('.copy-from-this-div a').each(function(i, a) { // Get all images and the corresponding 'li' var images = $(a).find('img'), li = $('.paste-into-this-div li').eq(i); // Add the images $(li).append(images); // Remove the link $(this).remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="copy-from-this-div"> <a href="#" target="_blank"> <img src="#"> </a> <a href="#" target="_blank"> <img src="#"> </a> <a href="#" target="_blank"> <img src="#"> </a> </div> <ul class="paste-into-this-div"> <li class="images"></li> <li class="images"></li> <li class="images"></li> </ul>