Question

这是我的基本代码

<div class="galleria-image">
    <div class="galleria-layer">
    </div>
</div>
<div class="galleria-image">
    <div class="galleria-layer">
    </div>

    <img src="blah">
</div>

我想使用jQuery将我的元素包装在一个新元素中，所以看起来像这样：

<div class="galleria-image">
    <div class="galleria-layer">
    </div>
</div>
<div class="galleria-image">
    <div class="galleria-layer">
    </div>

    <span class="zoom" id="ex1">
        <img src="blah">
    </span>
</div>

我尝试了一些jQuery方法，但我无法做到。例如：

$('.galleria-image > img').wrap('<span class="zoom" id="ex1"></span>');

知道我应该做什么吗？

Answer 1

你不需要关闭</span>

你的选择器也是错的（＆gt;）只有第一个孩子.. 看到这个小提琴......

http://jsfiddle.net/jFIT/6h8Xw/

$(document).ready(function(){
  alert( $('.galleria-image img').length > 0 ? "exists" : "not exists" );
  $('.galleria-image img').wrap('<span class="zoom" id="ex1">');
});

Answer 2

var $galleria1 = $('.galleria-image').eq(1);
var $img = $galleria1.find('img').detach();

var $span = $('<span>', { class: "zoom", id: "ex1"});
$span.append($img);

$galleria1.append($span);

使用jquery在div中包装img

2 个答案: