Как добавить DIV в новый тег с JQuery

Question

Рассмотрим следующий код:

<div class="left"> 
    <img class="img" src="stone1.png"/> 
</div> 
<div class="center"> 
    <img class="img" src="stone2.png"/> 
</div> 
<div class="right"> 
    <img class="img" src="stone3.png"/> 
</div> 

Теперь я хочу, чтобы создать этот тег йота JQuery:

<a href="#" data-r="start" data-a="fade"></a> 

и поместить каждый из DIV в теге для создания этого кода:

<a href="#" data-r="start1" data-a="fade"> 
    <div class="left"> 
     <img class="img" src="stone1.png"/> 
    </div> 
</a> 
<a href="#" data-r="start2" data-a="fade"> 
    <div class="center"> 
     <img class="img" src="stone2.png"/> 
    </div> 
</a> 
<a href="#" data-r="start3" data-a="fade"> 
    <div class="right"> 
     <img class="img" src="stone3.png"/> 
    </div> 
</a> 

Как это сделать?

Answer 1

Использование .wrap()

$('.left, .center, .right').wrap(function(idx){ 
    return '<a href="#" data-r="start' + (idx + 1) + '" data-a="fade"></a>' 
}) 

Демо: Fiddle

Answer 2

Вы можете использовать .wrap метод

$('div').each(function(i) { 
     $(this).wrap('<a href="#" data-r="start'+ (i+1) + '" data-a="fade">'); 
}); 

Check Fiddle

Answer 3

Попробуйте этот код:

$('.img').parent().wrap('<a href="#" data-r="start" data-a="fade"></a>'); 

Он выбирает все родительские элементы элемента с классом .img и wraps элемент в указанная разметка.

Answer 4

Используйте как этот

var i = 1; 
$("div").each(function(){ 
var elem = $("<a/>").html(this); 

elem.attr("href","#"); 
elem.attr("data-r","start"+i); 
elem.attr("data-a","fade"); 

i++;console.log(elem); 
}); 

See Demo

Answer 5

Попробуйте это:

$('.left').wrapAll('<a href="#" data-r="start" data-a="fade">');