Лучший способ переписать эту функцию .each()

Question

Этот код работает нормально, но я предполагаю, что есть лучший способ переписать это в jQuery или vanillaJS.

Основная цель:

• Чтобы клонировать определенные дочерние элементы из родительского элемента
• Создание новых элементов с клонированного ребенка элементы

• Append вновь созданные элементы в новый контейнер.

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

Я не знаю, что вам нужно итерации, просто объединить вызовы find():

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

Answer 2

Я думаю, вы можете использовать .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>