克隆 div 的特定内容并放入其他 div

【问题标题】：Clone Specific content of the div and put in other div克隆 div 的特定内容并放入其他 div
【发布时间】：2010-08-21 20:05:27
【问题描述】：

当我尝试使用 jquery 克隆一个元素时，我遇到了一个小问题，基本上我有这个，我想克隆名为 clone 的 div 并将其他 div 放在其他地方。

<li class="jqModal"  >
    <div class="clone">
    <div class="image">
            <img src="<?php echo $products[$j]['thumb']; ?>"
                 title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" />
    </div>
    <h2><a href=""><?php echo $products[$j]['name']; ?></a></h2>
    <strong class="price"><?php echo $products[$j]['price']; ?></strong>
    <a href="<?php echo $products[$j]['href']; ?>">More details</a>
    </div>


</li>`

我准备在我的文档中使用它

$(document).ready(function () {
   $(".product-list li").hover(
      function () {
         //replace image and id
         $var = $(this).clone(false).find("#clone").
         $('#div-to-replace').replaceWith($var);
      }
   );
});

但它没有任何建议，提前谢谢你。 :)

【问题讨论】：

$(".product-list li") 如果您没有带有“product-list”类的
标签，则不会选择任何内容：/

$('.product-list li') 将选择类“product-list”的某个元素内的所有 LI 元素。所以我认为，代码示例中的包装元素“缺失”。

标签： javascript jquery css jquery-selectors

【解决方案1】：

试试这个：

$(".product-list li").hover(
    function () {
        //replace image and id
        $var = $('.clone', this).clone();
        $('#div-to-replace').replaceWith($var);
    }
);

对代码的更改：

您想用 class “clone”而不是 id 来克隆元素：#clone -> .clone
如果你先克隆然后找到元素，那么你克隆的太多了，所以我改变了克隆的选择器
在这一行的末尾有一个点，应该是分号。

【讨论】：

【解决方案2】：

我在这里看到了 3 个问题，首先是这一行：

$var = $(this).clone(false).find("#clone").

你需要一个;结尾而不是.，这样你就不会遇到语法错误，而且clone是类而不是#ID，所以你需要.find('.clone')。那么这里：

$('#div-to-replace').replaceWith($var);

您要替换的 <div> 将完全消失，因此下次将无法使用，我认为您想要的是：

var product = $(this).find('.clone').clone();
$('#div-to-replace').empty().append(product);

这不会替换#div-to-replace，而是将内容放在那里，否则当您将鼠标悬停在下一个 产品时，您会错过<div>。还要确保在创建局部变量时使用var，这样它就不会对没有它的全局变量产生不必要的副作用:)

【讨论】：