2011-08-16 10 views
5

2つ(またはそれ以上)のdivの周りにdiv要素を追加するにはどうすればよいですか?私は思う:jQueryで他の2つのdivの周りにラッパーdivを作成します

HTML:

<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

のjQuery:

$('div.list-price').each(function() { 
    $(this).before('<div class="action-price">'); 
    $(this).next().after('</div>'); 
    }); 

私は上記のコードはこれを行うことが望ま:

<div class="action-price"> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 
</div> 

しかし:

<div class="action-price"></div> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

誰か助けてくれますか?

おかげで、

ガボール

+0

あなたの前と後の用途は、これらの方法は、文書の内容にテキストを書いていないとして、彼らはむしろ_nodes_を書く無効です。したがって、無効なマークアップのために第1( 'before')は自動終了(bu jQuery自体)タグを挿入し、第2( 'after')は無効なマークアップをスキップします – Guard

答えて

1

あなたは、HTMLコードとしての要素を考えているが、彼らはオブジェクトです。開始タグと終了タグは完全な要素ではないため、別々に追加することはできません。

は、新しい要素を追加し、その中に既存のdivを移動:

$('div.list-price').each(function() { 
    var newDiv = $('<div/>').addClass('action-price'); 
    $(this).before(newDiv); 
    var next = $(this).next(); 
    newDiv.append(this).append(next); 
}); 

デモ:

$レスト:http://jsfiddle.net/Guffa/eFXbN/1/

+0

Thx Guffa、あなたは正しいですが、 ): $(this).parent( 'div')。addClass( 'action-price'); – riskogab

+0

@riskogab:私はすでにこれを加えており、デモへのリンクも追加しています。 :) – Guffa

+2

私のアプローチと答え、そのクリーナーを参照してください。 http://jsfiddle.net/blowsie/eFXbN/7/ – Blowsie

0
$first = ... // the 1st element 
$rest = ... // other elements, may be just the second one 
$first.wrap('<div class="wrapper"/>').parent().append($rest) 
0

私はあなたの最後の行をreveseしなければなりませんでした。 wrap( '')。parent()。append($ first);

1

これには、次のようにするのが良い方法です。

$("div.list-price").each(function(){ 
    $(this).nextUntil("div.list-price").andSelf().wrapAll("<div class='action-price'></div>"); 
}); 

jQueryデベロッパーは、シンプルで読みやすく、おそらく書かれたとおりの方法でしょう。

6

はwrapAll機能を使用してみてください:

$('.list-price, .sell-price').wrapAll('<div class="action-price" />'); 
関連する問題