如何使用jQuery在div中包圍圖像標簽

Question

我有一個包含內部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>  

希望任何人都可以告訴我一個腳本來動態執行此操作。

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.row中。 用小提琴進行演示，但這是我攻擊它的方式。

這是執行此操作的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。 該代碼不是很干，可以毫無疑問地重構為更優雅，但這確實完成了任務。

Answer 4

您可以使用jquery選擇父元素的每個子元素，然后用所需的任何標簽包裝它們：

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

如果需要進一步說明，可以參考以下鏈接：

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

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