Jquery изменить CSS дочернего div после клона - PullRequest
Новая
       6

Jquery изменить CSS дочернего div после клона

3 голосов
/ 02 февраля 2010

После того, как я клонирую DIV и могу изменить его свойства CSS, но не могу найти, как изменить его CSS дочернего DIV. В следующем примере я хочу изменить фон # 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);
});

Ответы [ 2 ]

4 голосов
/ 02 февраля 2010

Если у вас есть объект jquery, вы можете выполнить поиск селектора в области действия этого объекта с помощью $.find()

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

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

Однако вы не хотите, чтобы везде были дублированные идентификаторы, поэтому я бы предложил вам перейти к использованию классов вместо идентификаторов, поскольку они должны быть уникальными.

3 голосов
/ 02 февраля 2010

Во-первых, если вы клонируете элементы с идентификаторами, вы должны действительно удалить или изменить их.Во-вторых, это должно делать то, что вы хотите: 

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

Наконец, вообще говоря, я бы рекомендовал использовать классы, а не простой CSS, где это возможно.Кроме того, если вы используете класс, такой как «детали», он будет более точно соответствовать ситуации (поскольку у вас их несколько) и с ним будет проще работать.

...