Question

Can someone please explain the structure of this line of a script for me? Another user on here has written it as part of a function that I know want to edit and change to use elsewhere on my site.

    $('#main_content .img-wrapper').empty().append($(this).find('img').clone());

This one takes an image from one div and copies it to another with the class=”img-wrapper”

I want to do exactly the same but with text. I tried this

$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());

where (‘.info’) is the class name of the div I want to copy. Its not working.

I don’t fully understand the syntax as this is my first day using javascript. Please can someone explain where I’m going wrong?

This is the HTML – There are four different images and when the user clicks on each of the image I want it to load the same image and associated text in the main content div

    <div class="row">
<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images1.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#cc99cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images2.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#9966cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images3.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#6666cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images4.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#3366cc;"></div>
  </div>
</div>

This is the main content div

<div id="main_content">
  <!-- main content -->
  <div class="img-wrapper">
  </div>
  <div class="text-wrapper">
  </div>
</div>  

Answer 1

Try this:

$('#main_content .text-wrapper').empty().append($(this).find('.info').html());