1

内部のdivタグタグを含むdivタグがあります。x個のdivタグの周りにopenタグとcloseタグを追加するにはどうすればよいですか。

元

    <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をその1つに移動します。実演するためにフィドルに取り組んでいますが、これは私がそれを攻撃する方法です。

これがそれを行う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を確認するには、FirebugまたはWeb開発ツールを使用して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 に答える