JQuery Cycle Div as Anchor

Question

I am creating a page with several sections of content that will be inserted and exited - just a few lines of code with a jQuery loop.

I have a navigation bar where I want to add links. No problem with the jquery loop - I can even specify the image or H3 tag that I want to use.

However, I want to add a whole div from the slide to appear in the sidebar. How can I select this div?

Now my code is:

$('#servicesWrap').cycle({ fx: 'scrollLeft', speed: 'normal', timeout: 0, pager: '#servicesSidebar', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#">' + jQuery(slide).children(".serviceButton").eq(0).text() + '</a></li>'; } }); 

I found PagerAnchorBuilder in another stackoverflow entry. It works fine, but only captures the text inside the div. I want to capture an entire div that looks something like this:

  <div class="serviceButton"> ... Text and images go here... </div> 

I am sure it is simple, I just do not know jQuery well enough to select the entire div.

Answer 1

Try the following:

  return '<li><a href="#">' + $(slide).children(".serviceButton:first")[0].outerHtml + '</a></li>';