jqueryを使用して画像タグをdivに囲む方法

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の答えを完了、あなたはループがaroudでき.slice() d .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); 

あなたが更新されDOMを見て放火犯やウェブのdevのツールを使ってDOMを検査する必要があります。コードは非常にDRYではなく、間違いなくリファクタリングされてより洗練されたものになるかもしれませんが、これはタスクを達成します。

Answer 4

あなたは親要素のそれぞれの子要素を選択するためにjqueryのを使用して、あなたが望む任意のタグでそれらをラップすることができます：

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

あなたがさらに明確化が必要な場合は、これらのリンクを参照できます。

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

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