克隆后jQuery更改子div的CSS答案

【问题标题】：Jquery change CSS of child div after clone克隆后jQuery更改子div的CSS
【发布时间】：2011-01-12 02:33:00
【问题描述】：

我克隆了一个 DIV 并可以更改它的 CSS 属性，但找不到如何更改它的子 DIV 的 CSS。在下面的示例中，我想将 #details-child 的背景从黄色更改为蓝色。 CSS：

#wrapper {
    width:200px;
    background:gray;
}
#details {
    width:200px;
    height:100px;
    background:green;
}
#details-child {
    width:100px;
    height:100px;
    background:yellow;
}

JS：

jQuery.noConflict();
jQuery(document).ready(function() {
    // clone
        clone_details = jQuery("#details").clone();

    // change CSS           
        clone_details.css({'margin-top':'50px', 'background':'red'});
        // jQuery("#details-child").css('background','blue'); // changes original div

    // render clone
        jQuery("#wrapper").append(clone_details);
});

【问题讨论】：

标签： jquery css html clone

【解决方案1】：

一旦你有了一个 jquery 对象，你就可以使用$.find()在该对象的范围内进行选择器搜索

http://api.jquery.com/find/

clone_details.find('#details-child').something();

但是，您不希望到处都有重复的 ID，因此我建议您转而使用类而不是 ID，因为它们必须是唯一的。

【讨论】：

好的，我忘了告诉...我将它与 SWFObject 一起用于替代内容。所以整个#wrapper 都被Flash 擦除了（如果我理解的话）。我想克隆替代内容以在 Flash 下呈现，并进行一些 CSS 更改。
如果您希望“替代内容”在不考虑 Flash 的情况下呈现，这意味着它不是“替代内容”，您应该将其移到 Flash 播放器可能覆盖的容器之外。跨度>

【解决方案2】：

首先，如果您要克隆带有 ID 的元素，您应该真正删除或更改其 ID。其次，这应该做你想做的：

$("#details").clone().removeAttr("id")
  .css({'margin-top':'50px', 'background':'red'})
  .appendTo("#wrapper").children("#details-child")
  .removeAttr("id").css({background: "red"});

最后，一般来说，我建议尽可能使用类而不是原始 CSS。此外，如果您使用“详细信息”之类的类，它会更准确地适应这种情况（因为您有多个）并且更容易使用。

【讨论】：

谢谢。你能告诉我为什么我应该更改或删除他们的 ID 吗？
因为在同一个页面上不能有两个相同的 ID。
所以更改 ID 不会解决任何问题 :) 你必须删除它们。改用可以多次使用的类。