jQuery从一个div中选择每个元素并粘贴到另一个div中

Question

我需要jQuery函数从一个div中选择每个"a" html代码并将其粘贴到另一个div中。

从div每个"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>

粘贴到每个li：

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

</ul>

总之，我需要先删除div。

这是我试图制作的，但它不起作用。

$('.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

首先，您尝试将a元素添加到ul元素中，而不会在页面中看到它。

优化方式 https://jsfiddle.net/zyz3qymn/2/

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

我们也可以这样做 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

考虑一个纯JavaScript解决方案，更清晰一点。

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

轻松的傻瓜

＆＃13;

＆＃13;

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

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;