Home>

Task When clicking on different blocks with the "Media" class, copy their contents to a block with the class "TT", so that they appear one under the other.

Now it does not work, because Whatever block ("media") has not pressed, everything is copied from the first.

//Select the desired items
var a= document.QuerySelectorall ('. Media');
//Watch all the found items and hang on them events.
[] .Foreach.call (A, FUNCTION (EL) {
    //Hovering an event
    el.onclick= FUNCTION (E) {
        //Produce action
        $ ('# Clickker'). Clone (True) .unwrap (). Appendto ('. TT');
    }
}); 
<
DIV Class= "Media" id= "clicker" >
  ≪
DIV Class= "Media-Body" >
    ≪
H3 Class= "MB-0" >
54,120 <
/h3 >
    ≪
Span class= "Text-Uppercase Font-Size-XS" >
Total <
/span >
  ≪
/div >
≪
/div >
≪
DIV Class= "Media" id= "clicker" >
  ≪
DIV Class= "Media-Body" >
    ≪
H3 Class= "MB-0" >
12,650 <
/h3 >
    ≪
Span class= "Text-Uppercase Font-Size-XS" >
Total <
/span >
  ≪
/div >
≪
/div >
≪
DIV Class= "Media" id= "clicker" >
  ≪
DIV Class= "Media-Body" >
    ≪
H3 Class= "MB-0" >
32,390 <
/h3 >
    ≪
Span class= "Text-Uppercase Font-Size-XS" >
Total <
/span >
  ≪
/div >
≪
/div >
≪
DIV Class= "Media" id= "clicker" >
  ≪
DIV Class= "Media-Body" >
    ≪
H3 Class= "MB-0" >
76,770 <
/h3 >
    ≪
Span class= "Text-Uppercase Font-Size-XS" >
Total <
/span >
  ≪
/div >
≪
/div >
≪
DIV Class= "TT" >
≪
/div >
  • Answer # 1
    $ ('. Media'). Click (Function (E) {
      $ ('. TT'). Append (this.outerhtml);
    }); 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    54,120 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    12,650 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    32,390 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    76,770 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "TT" >
    ≪
    /div >
    

    Thank you, everything turned out to be much easier and less code !!!

    4isto2021-06-30 18:32:17

    But no, with such copying and new blocks that are copied while pressing make another copy

    4isto2021-06-30 18:49:26

    True, I need to be copied to the content of the block, and not the block itself.

    4isto2021-06-30 19:02:43

    @ 4isto In this case, change this.outerhtml on this.innerhtml

    twerk kid2021-07-01 04:54:30
  • Answer # 2
    $ ('. Media'). Click (Function (E) {
      $ ('. TT'). Append (this.outerhtml);
    }); 
    <
    script src= "https://cdnjs.cloudflare.com/ajax/libs/JQuery/3.3.1/jquery.min.js" >
    ≪
    /script >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    54,120 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    12,650 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    32,390 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "Media" id= "clicker" >
      ≪
    DIV Class= "Media-Body" >
        ≪
    H3 Class= "MB-0" >
    76,770 <
    /h3 >
        ≪
    Span class= "Text-Uppercase Font-Size-XS" >
    Total <
    /span >
      ≪
    /div >
    ≪
    /div >
    ≪
    DIV Class= "TT" >
    ≪
    /div >
    

    Thank you, everything turned out to be much easier and less code !!!

    4isto2021-06-30 18:32:17

    But no, with such copying and new blocks that are copied while pressing make another copy

    4isto2021-06-30 18:49:26

    True, I need to be copied to the content of the block, and not the block itself.

    4isto2021-06-30 19:02:43

    @ 4isto In this case, change this.outerhtml on this.innerhtml

    twerk kid2021-07-01 04:54:30
  • Answer # 3
    //Select the desired items
    var a= document.QuerySelectorall ('. Media');
    //Watch all the found items and hang on them events.
    [] .Foreach.call (A, FUNCTION (EL) {
        //Hovering an event
        el.onclick= FUNCTION (E) {
            //Produce action
            $ (this) .clone (TRUE) .unwrap (). Appendto ('. TT');
        }
    }); 
    &lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    54,120 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    12,650 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    32,390 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    76,770 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "TT" &GT;
    &Lt;
    /div &gt;
    
  • Answer # 4
    //Select the desired items
    var a= document.QuerySelectorall ('. Media');
    //Watch all the found items and hang on them events.
    [] .Foreach.call (A, FUNCTION (EL) {
        //Hovering an event
        el.onclick= FUNCTION (E) {
            //Produce action
            $ (this) .clone (TRUE) .unwrap (). Appendto ('. TT');
        }
    }); 
    &lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    54,120 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    12,650 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    32,390 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "Media" id= "clicker" &gt;
      &Lt;
    DIV Class= "Media-Body" &gt;
        &Lt;
    H3 Class= "MB-0" &gt;
    76,770 &lt;
    /h3 &gt;
        &Lt;
    Span class= "Text-Uppercase Font-Size-XS" &GT;
    Total &lt;
    /span &gt;
      &Lt;
    /div &gt;
    &Lt;
    /div &gt;
    &Lt;
    DIV Class= "TT" &GT;
    &Lt;
    /div &gt;