Question

I have some code like this:

<div id="gallery">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
</div>

and I want to rewrite it using jQuery to produce:

<div id="gallery">
    <ul id="carousel">
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</div>

What’s the best way?

Answer 1

Example: http://jsfiddle.net/pB98T/

$('#gallery > a').wrapAll('<ul id="carousel">').wrap('<li>');

This wraps all the <a> elements with the <ul id="carousel"> using .wrapAll(), then wraps them individually with <li> using .wrap().