jquery styling content in dynamic element - php

Question

I am using the jquery plugin flexslider to display some images and captions. I am using the code below to take captions out of the flexslider content and place into an outside element.
The captions are styled using spans but when they are placed into the new element called ".captions" they are not styled and all text is running together.
How can I apply styling and formatting to the text in the ".captions" div?
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$captions = $('.captions');
$('.flexslider').flexslider({
animation: "fade",
controlNav: "thumbnails",
directionNav: true,
slideshow: false,
useCSS: true,
touch: true,
start: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.text());
},
after: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.text());
}
});
});
</script>
For example I am echoing out this:
echo "<span class='artwork-title'>$page->title</span>,<span class='artwork-year'> $artwork->date</span><span class='artwork-year'>$artwork->dimensions</span>";
and my jquery seems to be getting rid of the span tags.

Answer 1

After rereading the question, it seems like you need the active caption in the .captions element. All you have to do is switch .text() to .html() and all of the elements should come with it.
$(window).load(function() {
$captions = $('.captions');
$('.flexslider').flexslider({
animation: "fade",
controlNav: "thumbnails",
directionNav: true,
slideshow: false,
useCSS: true,
touch: true,
start: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.html());
},
after: function() {
$activecaption = $('.flex-active-slide .flex-caption');
$captions.html($activecaption.html());
}
});
});
Reference: http://www.woothemes.com/flexslider/

Answer 2

You can apply a css class with the .addClass
<style>
.capStyle
{
color: red;
}
</style>
$(".captions").addClass("capStyle");