Hey guys, I have this code which loads 10 divs from an external file into the main file. There's also a next / previous function to skip back and fourth between the divs.

Demo: http://goo.gl/RFBN2E

(Click load content to load the content via ajax, then the next / previous buttons will skip between the divs)

My question, what's the best way to load a text string in the external divs into a different part of the main file? Here's an example.

How it works at the moment:
Code:
<!-- External File Divs -->

<div id="div1">

  <h1>DIV 1</h1>

</div>

<!--Main File -->

<div id="projects">

  <!-- The above div1 will be loaded here -->

</div>
I need to add:

Code:
<!-- External File Divs -->

<div id="div1">

  <h1>DIV 1</h1>

  <p class="title">This is a title</p>

</div>

<!--Main File -->

<div id="projects">

  <!-- The above div1 will be loaded here -->

</div>

<div id="title">

  <!--I need the title from the div to be loaded just underneith in this seperate div -->

</div>
I was thinking of using something like this to simply clone the text from one into the other.

Code:
$('projects.html p.title').html($('index.html div#title').html());
But I couldn't quite work it out and I'm just a little bit lost on how to go about doing it.

Here's some pseudo code included into the load function to help explain further.

Code:
$(".load").on('click', function () {

  var $projects = $("#projects"),

  id = $(this).data('id');

  $projects.html("").data('id', id);

  $("#loading").show();

  $projects.load("projects.html #div" + id, function () {

  $("#projects").show();

  $("#title").show();

  $("#loading").hide();

  // copy p.title from projects.html into div#title index.html

  })

});
Any ideas on how to achieve this?