How to add ul and li to each image with jquery?

I have the following code generated dynamically. It can be just one, two, three or four images.

<div id="system">       

    <FORM ACTION="command.asp" METHOD="get" NAME="artForm">

    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
     <TR>
      <TD VALIGN="top">

    <H1>Lian Li PC-A70FB, Maxitower, Sort</H1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  gravida eget ultricies vel, lobortis a ipsum. Donec sollicitudin mi eget nisl 
    vestibulum et euismod elit pretium. 
    </p>


<img src="images/10047_1.jpg" alt="" />
<img src="images/10059_1.jpg" alt="" />
<img src="images/10101_1.jpg" alt="" /> // there could be more, or can be only one img



      </TD>

 ...
 ...

I'd like to add ul and li tag to all the images like this.

<ul class="thumb">

<li><img src="images/10047_1.jpg" alt="" /></li>
<li><img src="images/10059_1.jpg"开发者_Python百科 alt="" /></li>
<li><img src="images/10101_1.jpg" alt="" /></li>

</ul>

Could anyone tell me how to do it please?

Thanks in advance.

$(function() {
    $('img').wrapAll('<ul>').wrap('<li>');
});

You can use wrap() and wrapAll() methods. Just call wrap() on each img to add the li, and then wrapAll() on all of them to wrap them in an ul.