将内容从一个元素复制到另一个

Question

I've got a image slider I'm using, each image has a caption below it, which looks a little like this.

<ul class="image-slider">
    <li>
      <img src="img-1.jpg">
      <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
    </li>
    <li>
      <img src="img-2.jpg">
      <figcaption>Fig2. - A view of lighthouse.</figcaption>
    </li>
    ...
</ul>

Using a bit of jQuery, this image slider slides along, showing one image and their caption.

I've got a description box on my website where I want my caption to actually appear.

<div class="description">
  <h3>Image Gallery</h3>
  <p class="caption">This is where I want my caption to appear</p>
</div>

I can't use any absolute positioning or CSS, I need the caption text to move to across to the p tag using something else, possibly Javascript.

Is this possible?

Any help is appreciated. Thanks in advance!

Answer 1

Shouldn't this work?

$(".caption").text($('li:nth-child('+i+')').text());

where i is a variable (INT) that could get i++ when moving forward in the image slider and get substracted by one ( i-- ) when one goes one step back in the image slider.