JQuery changes CSS of a child div after cloning

Question

After I clone a DIV and can change its CSS properties, but cannot find how to change its child DIV CSS. In the following example, I want to change the background of # details-child from yellow to blue. 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

Once you have a jquery object, you can do a selector search from the scope of this object with $.find()

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

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

However, you don’t want the identifiers everywhere to be duplicated in the end, so I suggest you switch to using classes instead of identifiers, since they must be unique.

Answer 2

-, , ID. -, , :

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

, , , CSS, . , "", ( ), .