1

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

前任

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

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

4

4 回答 4

6

完成@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/

于 2012-04-26T04:23:54.530 回答
2

干得好：

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

于 2012-04-26T04:06:50.133 回答
0

我可能使用的顺序是首先，将第一个 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 开发工具检查 DOM 以查看更新的 DOM。代码不是很干，毫无疑问可以重构为更优雅，但这确实完成了任务。

于 2012-04-26T04:19:52.450 回答
0

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

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

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

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

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

于 2012-04-26T04:20:21.833 回答