Matching Variables of Two Elements (binding cycle and ui-selectable)

I need help with condensing my script so that 开发者_运维知识库a #div_x is related to a separate element img_x.

My project uses ui-selectable to grab points on a map and return an image set in a separate div via jquery cycle (as in here http://bit.ly/gH7Lm3).

I have bound the 'selectablestop' event to two functions - .hasClass and .append - in order to 1) detect if a point has been selected and 2) append the containing cycle div with a corresponding image (also, incidentally, contained within its own div). As is, it looks something like this:

$("#selectable").selectable().bind("selectablestop", function(event, ui) {
if($('#point_a').hasClass('ui-selected')){
$('#cycle').append('<div id="pic"><img src="image_a.jpg" /></div>');}

if($('#point_b').hasClass('ui-selected')){
$('#cycle').append('<div id="pic"><img src="image_b.jpg" /></div>');}

if($('#point_c').hasClass('ui-selected')){
$('#cycle').append('<div id="pic"><img src="image_c.jpg" /></div>');}

, etc.

My question:

Can I accomplish this with one argument, using a variable x instead of writing out each line matching point_a to img_a, point_b to img_b, etc. That is,

if($('#point_(variable)').hasClass('ui-selected')){
$('#cycle').append('<div id="pic"><img src="image_(matching variable).jpg" /></div>');}

Thanks! I've spent some time looking for a good approach.

Thanks to rdworth via Jquery forum for this solution:

<li id="point_a" data-image="image_a.jpg">...</li>
<li id="point_b" data-image="image_b.jpg">...</li>


$( ".ui-selected" ).each(function() {
  $( "#cycle" ).append( "<div id='pic'><img src='" + $( this ).data( "image" ) + "'></div>" );
});