jQuery UI多重对话框和PHP

I am having some issues with having multiple dialogs on one page and linking them to IDs that are being generated by PHP. I would like multiple image to be links to a dialog containing the content... here is my code:

PHP:

<div id="children">
<?php 


$children = array_values(get_pages(array('child_of' => $post->ID)));

foreach( $children as $ch => $child ){
    echo '<div id="dialog-'.$child->ID.'" title="Basic dialog">';
    echo $child->post_content;
    echo '</div>';
}

foreach( $children as $ch => $child ){
    $attachments = get_posts(array('numberposts'=> 1, 'post_parent' => $child->ID, 'post_type' => 'attachment', 'order' => 'DESC', 'orderby' => 'post_date'));
    //print_r($attachments);
    foreach( $attachments as $a => $attachment ){
        echo '<a href="#opener-'.$child->ID.'" id="opener-'.$child->ID.'" >';
        echo '<img class="attachment-thumb" src="'.$attachment->guid.'" width="150" height="150" />';
        echo '</a> ';
    }
}
    //print_r($children)    
?>

Now I realize that my jQuery is producing each id with 1,2,3 rather than the actual PHP IDs, but I dont know how to set it so jQuery will link to the proper dialogs and openers. Do I need to use Ajax?

jQuery:

<script>
$(function() {
var options = {
        autoOpen: false,
        width: 'auto',
        modal: true
};
var num = 1;
$("#children").each(function() {
        var dlg = $('#dialog-' + num).dialog(options);
        $('#opener-' + num).click(function() {
                dlg.dialog("open");
                return false;
        });
        num = num + 1;
});
});
</script>
</div>

$("#children").each only runs once, for the one "children" div. Thus num never becomes greater than 1 in this function. You likely want $("#children div").each, which will execute for all the div children of 'children'.

(Well technically num becomes 2 (after 1 executes)... but never gets executed while 2.)

Tutorial on targeting dynamic elements with jquery.