重写此.each（）函数的更好方法

Question

This code works fine, but I'm guessing there is a better way to rewrite this in either jQuery or vanillaJS.

The main goal is:

• To clone specific child elements from parent element
• Create new elements with the cloned child elements

• Append newly created elements to new container.

   $('.grid-block').each(function(){ var slide = $('<div class="slide"></div>'); $(this).find('.asset-holder img') .clone() .appendTo(slide); $(this).find('.asset-tools') .clone() .appendTo(slide); slide.appendTo('.gallery-slider'); });` 

Answer 1

I don't know that you need iteration, just combine your calls to find() :

var slide = $('<div class="slide"></div>');
$('.grid-block').find('.asset-holder img, .asset-tools').clone().appendTo(slide);
slide.appendTo('.gallery-slider');

Answer 2

I think, you can use .map()

 $('.grid-block').map(function() { var $this = $(this), $div = $('<div class="slide"></div>'); $this.find('.asset-holder img') .clone().appendTo($div); $this.find('.asset-tools') .clone().appendTo($div); return $div.get() }).appendTo('.gallery-slider'); 

 .gallery-slider { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="grid-block"> <div class="asset-holder"> <img src="//placehold.it/64X64&text=1" /> </div> <div class="asset-tools"> tools 1 </div> </div> <div class="grid-block"> <div class="asset-holder"> <img src="//placehold.it/64X64&text=2" /> </div> <div class="asset-tools"> tools 2 </div> </div> <div class="grid-block"> <div class="asset-holder"> <img src="//placehold.it/64X64&text=3" /> </div> <div class="asset-tools"> tools 3 </div> </div> <div class="gallery-slider"></div>