jQuery Cloning |

Question

I having some logic issues with a small bit of jQuery.

I’m pretty sure I need a loop setup, but am having difficulties snapping this together. I've referenced tuts, videos, working examples, slideshows, even raw javascript but am still having difficulties snapping together the logic end.

Fiddle Links provided, below some brief notes…

Problem:

• I would ideally like the anchors replicated which I have done, but with multiples on a page it’s copying all of them and inserting after, all of them. I just need the link wrapped in the H5 to be copied once, and they need to be unique.

Goal:

• Make a block style button utilizing the existing markup from a WYSIWYG.
• Platform (if helpful): Drupal 6 CMS, with jQuery 1.2.6.
• Note: I can link to externally hosted, but Drupal gets angry sometimes when I do this.

Required:

• To use a CSS class (makeBigButton) to trigger this behavior.
• The end user can add a custom class in the WYSIWYG so they can “flip the switch” when needed by adding this class.

Limitations:

• We are not on HTML5 so wrapping the contents with an anchor is out.
• The typeface styles vary depending on content so I’m trying to avoid custom styles where I can.

Original example includes…

• Markup
• Styling
• Commented but semi functional behavior
• http://jsfiddle.net/n5FRB/1/

HTML

        <div id="right">
<div class="module conference program makeBigButton">
    <p>
        <img src="#" alt="Placeholder"/>
    </p>
    <h5>
        <a title="Yahoo" target="_blank" href="http://www.yahoo.com">Yahoo</a>
    </h5>
</div>

<div class="module conference program makeBigButton">
    <p>
        <img src="#" alt="Placeholder"/>
    </p>
    <h5>
        <a title="Google" target="_blank" href="http://www.google.com">Google</a>
    </h5>

</div>    

Semi functional jQuery snip

$('.makeBigButton h5 a').clone().addClass('bigButton').insertAfter('.makeBigButton h5');

Semi functional includes…

• Code snip
• Somewhat desired behavior
• http://jsfiddle.net/n5FRB/2/

Thanks everyone.

Answer 1

There you go:

$('.makeBigButton h5').each(function(){
    $(this).find('a').clone().addClass('bigButton').insertAfter(this);
});

http://jsfiddle.net/n5FRB/4/

And welcome to Stackoverflow! ;)