Append swatches based on multiple images

I got a page of products which some have multiple images. I want to append a swatch (only if multiple images exist) that will toggle the image that the swatch relates to. I was thinking adding a title to each image that will be a class which the swatch will be.

For example a product has 3 images. The 1st image is black, 2nd is blue, 3rd pink. Each swatch will gets its class name from the title name of the image. Also each image will toggle the corresponding image as well.

HTML

<li class="prod">
<div class="mainpic">

<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 

</div>
<h1>Nike Shirt</h1>
</li>

<li class="prod">
<div class="mainpic">

<img src="image" title="black" />

</div>
<h1>Nike Shir开发者_StackOverflow社区t</h1>
</li>

<li class="prod">
<div class="mainpic">

<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Shirt</h1>
</li>

SWATCH HTML (which will be append automatically if more than 1 image is detected)

<ul class='swatch'>
<li class='black'></li>
<li class='blue'></li>
<li class='pink'></li>
<ul> 

SCRIPT (not complete)

var totalImg = $('.mainpic').find('img').length;

if ( totalImg > 1 ) { 

$('.prod .mainpic').append('<ul class="swatches"></ul>');

}

FINAL HTML

<li class="prod">
<div class="mainpic">

<ul class='swatch'>
<li class='black'></li>
<li class='blue'></li>
<li class='pink'></li>
<ul> 

<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 

</div>
<h1>Nike Shirt</h1>
</li>

<li class="prod">
<div class="mainpic"> 

<img src="image" title="black" />

</div>
<h1>Nike Pants</h1>
</li>

<li class="prod">
<div class="mainpic"> 

<ul class='swatch'>
<li class='yellow'></li>
<li class='green'></li>
<ul> 

<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Hat</h1>
</li>

Thanks in advance!

This produces exactly the HTML specified.:

$('li.prod div.mainpic').each ( function () {
    var jThis           = $(this);
    var mainImages      = jThis.find ('img');

    if ( mainImages.length > 1 ) {
        jThis.prepend ('<ul class="swatches"></ul>');
        var targList    =  jThis.find ('ul.swatches');

        mainImages.each ( function () {
            newClass    =  $(this).attr ('title');
            targList.append ("<li class='" + newClass + "'></li>");
        } );
    }
} );

See it in action at jsFiddle. Note that the CSS is just to hopefully make it clearer what's going on.

Results:

<li class="prod">
<div class="mainpic">

<ul class="swatches">
<li class="black"></li>
<li class="blue"></li>
<li class="pink"></li>
</ul>

<img src="image" title="black" />
<img src="image" title="blue" /> 
<img src="image" title="pink" /> 

</div>
<h1>Nike Shirt</h1>
</li>

<li class="prod">
<div class="mainpic">

<img src="image" title="black" />

</div>
<h1>Nike Pants</h1>
</li>

<li class="prod">
<div class="mainpic">

<ul class="swatches">
<li class="yellow"></li>
<li class="green"></li>
</ul>

<img src="image" title="yellow" />
<img src="image" title="green" />
</div>
<h1>Nike Hat</h1>
</li>

1) Get all the .mainpic elements
2) filter the elements that have more than 1 image.
3) for each .mainpic element of step#2 append a holding UL element
4) iterate through each img element within each .mainpic element of step#2
5) wrap it with li and append to the ul element created earlier

Try this:

<script type="text/javascript">
    $(document).ready(function() {
            $(function() {
                var tgtLis = $(".mainpic").filter(function(){ //Get all the mainpic elements
                    return $(this).children("img").length > 1; //return only if they have  more than 1 image.
                }).each(function(a, b){
                    var $this = $(b);
                    var ul = $this.append("<ul>");  //append a holding UL element for each mainpic
                    $("img", $this).each(function(a, b){ //iterate through each img element
                        ul.append($("<li/>").append(b)); //wrap it with li and append to the ul element created earlier
                    });
                });
            });
    });
</script> 

Working example@: http://jsfiddle.net/Rgz4R/