Question

克隆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);
});

Answer 1

获得jquery对象后，可以使用$.find()

在该对象的范围内进行选择器搜索

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

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

但是，你不希望到处都有重复的ID，所以我建议你转而使用类而不是ID，因为那些必须是唯一的。

Answer 2

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

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

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

克隆后Jquery更改子div的CSS

2 个答案: