Question

我有一个包含内部div标记标记的div标记。如何在x个div标签周围添加打开和关闭标签。

E.x。

    <div id="resizable">
        <div><img class="img1 image" src="images/lion5.jpg" /></div>
        <div><img class="img2 image" src="images/lion1.jpg"/></div>
        <div><img class="img2 image" src="images/lion2.jpg"/></div>
        <div><img class="img2 image" src="images/lion3.jpg"/></div>
    </div>

添加将代码转换为：

<div id="resizable">
    <div class="row">
        <div><img class="img1 image" src="images/lion5.jpg" /></div>
        <div><img class="img2 image" src="images/lion1.jpg"/></div>
    </div>
    <div class="row">
        <div><img class="img2 image" src="images/lion2.jpg"/></div>
        <div><img class="img2 image" src="images/lion3.jpg"/></div>
    </div>
</div>

希望任何人都可以告诉我一个动态执行此操作的脚本。

Answer 1

完成@Derek答案后，您可以循环.slice()并使用.wrapAll()完成工作。

var c = $('#resizable').children();

for (var i = 0 ; i < c.length ; i+=2) {
    c.slice(i,i+2).wrapAll('<div class="row"></div>');
}

示范：http://jsfiddle.net/SAtrc/1/

Answer 2

你走了：

http://api.jquery.com/wrap/ - 包括示例和用法。

Answer 3

我可能使用的顺序是，首先将第一个div.row插入div＃resizable，然后开始将你想要的内部div移动到该div中。然后，追加另一个div.row并将剩余的内部div移动到那个div中。努力演示，但这是我攻击它的方式。

这是执行此操作的jsfiddle：http://jsfiddle.net/rsPGv/

var $firstDiv = $('<div />').prependTo('div#resizable').addClass('row');
$('div div:nth-child(2)').appendTo($firstDiv);
$('div div:nth-child(2)').appendTo($firstDiv);
var $secondDiv = $('<div />').insertAfter($firstDiv).addClass('row');
$('div div:nth-child(3)').appendTo($secondDiv);
$('div div:nth-child(3)').appendTo($secondDiv);

您需要通过firebug或web dev工具检查DOM以查看更新的DOM。代码不是很干，毫无疑问会被重构为更优雅，但这确实可以完成任务。

Answer 4

您可以使用jquery选择父元素的每个子元素，然后使用您想要的任何标记包装它们：

$('div.row > img').wrap('<div></div>');

如果您需要进一步说明，可以参考这些链接：

http://api.jquery.com/child-selector/

http://api.jquery.com/wrap/

如何使用jquery用div包围图像标签

4 个答案: