Clone Link and wrap new Element

Question

Я клонировал Href и завернул его в DIV. Но проблема в том, что когда у меня есть несколько Элементов, второй Элемент становится той же Линией. Я знаю каждую функцию, но как я могу использовать эту функцию?

var link = $('.image-title').clone().empty().prop('outerHTML'); 
 
$('.text-hover').wrap(link);

<div class="ref-wrapper"> 
 
    <div> 
 
     <div class="image-wrapper"> 
 
      <a href="image.jpg" class="image-title" data-gallery="borscheid"><img src="image.jpg"></a> 
 
      <a href="iamge2.jpg" data-gallery="borscheid"></a> 
 
      <div class="text-hover">content</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
      
 
<div class="ref-wrapper"> 
 
    <div> 
 
     <div class="image-wrapper"> 
 
      <a href="image2_1.jpg" class="image-title" data-gallery="botel"><img src="image2_1.jpg"></a> 
 
      <a href="iamge2_2.jpg" data-gallery="botel"></a> 
 
      <div class="text-hover">content</div> 
 
     </div> 
 
    </div> 
 
</div>  

Fiddle

Вот что я хочу:

<div class="ref-wrapper"> 
    <div> 
     <div class="image-wrapper"> 
      <a href="image.jpg" class="image-title" data-gallery="borscheid"><img src="image.jpg"></a> 
      <a href="iamge2.jpg" data-gallery="borscheid"></a> 
      <a href="image.jpg" class="image-title" data-gallery="borscheid"><div class="text-hover">content</div></a> 
     </div> 
    </div> 
</div> 

<div class="ref-wrapper"> 
    <div> 
     <div class="image-wrapper"> 
      <a href="image2_1.jpg" class="image-title" data-gallery="botel"><img src="image2_1.jpg"></a> 
      <a href="iamge2_2.jpg" data-gallery="botel"></a> 
      <a href="image2_1.jpg" class="image-title" data-gallery="botel"><div class="text-hover">content</div></a> 
     </div> 
    </div> 
</div> 

Первый Href обертывание в Div "текст-зависании".

Answer 1

Я думаю, что вы хотите что-то вроде этого:

$('.image-title').each(function(){ 
    var link = $(this).clone().empty().prop('outerHTML'); 
    $(this).siblings(".text-hover").wrap(link); 
}) 

Fiddle