他のdivからコンテンツを取得して新しいdivに適用する

Question

私はdivボックスを動的に作成するアプリケーションを持っており、AJAXはそのボックスの中に置かれた画像を読み込みます。

ボックスが既に存在する場合、イメージを（AJAXを介して）再度ロードしたくないです。その代わりに、コンテンツ（すなわち、画像）は、最初のボックスから取得し、新しいものに適用する必要があります。

このような理由で、私は次のようなことをしたいと思っています： "あるボックスが存在する場合は、そのボックスからコンテンツを取り出して新しいボックスに適用してください。"

以下は、私が欲しいものを示すコードです。私が知る必要があるのは、ボックスが存在するかどうかを調べる方法（1行目）と、新しいボックス（3行目）にコンテンツを適用する方法です。

1. if (box exist...?) { 
2. var content = $('.boxContent').html(); 
3. $('.boxContent') ? 
4. } 
5. 
6. else { 
7. 
8. // retrieve the images through AJAX and place in the box... 
9. 
10. } 

Answer 1

if ($('.boxContent').is('*')) { //it exists 
    var content = $('.boxContent').html(); 
    var newBox = $('<div id="new-box"></div>'); 
    newBox.html(content); 
} 

代わりに、クローンを作成することができます：

if ($('.boxContent').is('*')) { //it exists 
    var newBox = $('.boxContent').clone(); 
    // newBox is an EXACT copy of the .boxContent 
} 

私はIDの代わりに、この場合は、クラスセレクタを使用することをお勧めします。

Answer 2

何かが単にそれを選択して、コレクションの長さでloookingによってDOMに存在する場合は、伝えることができます：

var boxes = $('.boxContent') 
if (boxes.length) { 
    var content = boxes[0].html(); 
} else { 
    // AJAX 
} 

Answer 3

をいくつかの要素は、jQueryのに利用可能であるかどうかを確認する適切な方法は次のとおりです。

if($('element').length != 0){//element exists 
     `$('newElement').html($('element').html());` 
} 
else{ 
    //ajax stuff 
}