2009-04-27 5 views
2

jQueryを使用してマークアップを動的に拡張し、divが丸いボックスとして表示されるようにします。例えばdivをjQueryの兄弟で囲む最も簡単な方法は何ですか?

私のDOMのようなユニークなIDを持つdiv要素の一連のオブジェクトがある場合:使用して選択することができ

<div id="queuediv0" class="isequeue" > </div> 

$(“.isequeue”) 

私はなるようにラップ/それらのdivを交換したいの最終結果は次のようになります。

<div class="isequeue_wrapper"> 
    <div class="isequeue_wrapper_oc"> 
     <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div> 
    </div> 
    <p class="isequeue_header"> 
     Header text 
    </p> 
    <div class="isequeue_wrapper_ic"> 
     <div class="isequeue_wrapper_lt" style="margin: 0 5px;"> </div> 
     <div class="isequeue_wrapper_lt" style="margin: 0 3px;"> </div> 
     <div class="isequeue_wrapper_lt" style="margin: 0 2px;"> </div> 
     <div class="isequeue_wrapper_lt" style="margin: 0 1px;"> </div> 
    </div> 
    <div id="queuediv0" class="isequeue" > 
    </div> 
    <div class="isequeue_wrapper_oc"> 
     <div class="isequeue_wrapper_dk" style="margin: 0 1px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 2px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 3px;"> </div> 
     <div class="isequeue_wrapper_dk" style="margin: 0 5px;"> </div> 
    </div> 
</div> 

追加のマークアップは、オンザフライで追加することも、隠しておくこともできます元のページで選択してコピーすることができます。

これを達成するためのきれいな方法があると確信していますが、今は私を逃してしまっています。 jQuery.wrap()は、選択したオブジェクトを指定されたソースの最も内側に配置しますが、選択したアイテムを新しく追加されたソースの兄弟にしたい場合は、どのようにしてこれを実行しますか?

おかげで、 ジム

答えて

2

何かが仕事ができる:

$(function() { 
    var $isqueue = $('.isequeue'); 
    $isqueue.wrap('<div class="isequeue_wrapper"></div>'); 
    $isqueue.before(/* All the isequeue_wrapper_oc, isequeue_header, isequeue_wrapper_ic and stuff */).after(/* All the isequeue_wrapper_ic stuff */); 
}); 

をそれだけですべてのものは、事前に行われていた後、それをクローンするのが賢明だろう。しかし、あなたはまた、文字列としてそれらを持つことができ、同じ方法を挿入しました。

0

(前)と()動作するはずです後。このような

関連する問題