CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Borja
Borja

Reputation: 3551

if i clone an element, when i customize (css) that element how can customize also the element cloned?

If i clone an element, then if i want to customize that element (by id) how can customize also the element cloned ?

What i tried:

<div id="A"> //the element that will be clone
</div>

<div id="box" style="margin-top: 50px">  //into this box
</div>

CSS 

#A{
  width: 100px;
  height: 100px;
  background: #000;
}

JS

$('#A').clone(true).appendTo('#box');
$('#A').css('background','#ff0000'); 

//i want to get red background also to element cloned, infact only the true original element change color :/

This is jsfiddle: https://jsfiddle.net/t90ptkcz/1/

I hope that this is possible and you can help me. Thanks a lot and sorry for my english :)

Upvotes: 0

Views: 154

Answers (2)

Anton
Anton

Reputation: 2636

I prefer the answer from @shu and however I am not sure in which scenario this could be helpful it is possible to achieve exactly what you want by implementing a jQuery plugin with two methods:

  • $.fn.cloneAndRemember - will clone an element and store both the source element and its clone (or clones) into a dictionary
  • $.fn.withClones - will give you a jQuery object collection which includes a selected element and all its clones (retrieved from the dictionary)

The use case would then look like this:

$('#A').cloneAndRemember(true).appendTo('#box');
$('#A').withClones().css('background','#ff0000');

Upvotes: 0

shu
shu

Reputation: 1956

ID # selector finds the unique single element from DOM though multiple elements having same ID present in DOM but class . selector used to get group of elements,having the same class name

<div id="A" class="someClass" > //the element that will be clone
 </div>

 <div id="box" style="margin-top: 50px">  //into this box
 </div>

JS

 $('#A').clone(true).appendTo('#box');
 $('.someClass').css('background','#ff0000');

Upvotes: 3

Related Questions