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>

现在，我想创建这个标签whit jQuery：

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

并将每个div放在标记a中以创建此代码：

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

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

<强> Check Fiddle

Answer 2

使用.wrap()

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

演示：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">');

如何使用jQuery在新标记中添加div

5 个答案: