从另一个 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

你可以通过简单地选择某些东西并查看集合的长度来判断 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
}