使用jQuery UI为循环中的每个项显示模式框

在Rails中，我有以下循环生成一个英雄列表：

<% @heros.each do |hero| %>  
  <li class="str">    
    <div class="hero-icon <%= hero.friendly_id %>"></div>                   
    <div id="dialog-form">
      This is the modal box.
    </div>
  </li>
<% end %>

我想用jQuery UI框架实现的是当我点击 hero-icon div时，为列表中的每个英雄显示 dialog-form 内的信息的模态框 .

默认情况下，以下jQuery代码不允许这样做 . 它目前只有你有 ONE dialog-form div和 ONE hero-icon 触发器才有效，否则它将无效 .

// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );

var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );

function updateTips( t ) {
tips
    .text( t )
    .addClass( "ui-state-highlight" );
setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
        min + " and " + max + "." );
    return false;
} else {
    return true;
}
}

function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
} else {
    return true;
}
}

$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
    "Create an account": function() {
        var bValid = true;
        allFields.removeClass( "ui-state-error" );

        bValid = bValid && checkLength( name, "username", 3, 16 );
        bValid = bValid && checkLength( email, "email", 6, 80 );
        bValid = bValid && checkLength( password, "password", 5, 16 );

        bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i,     "Username may consist of a-z, 0-9, underscores, begin with a letter." );
        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
        bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
        bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

        if ( bValid ) {
            $( "#users tbody" ).append( "<tr>" +
                "<td>" + name.val() + "</td>" + 
                "<td>" + email.val() + "</td>" + 
                "<td>" + password.val() + "</td>" +
            "</tr>" ); 
            $( this ).dialog( "close" );
        }
    },
    Cancel: function() {
        $( this ).dialog( "close" );
    }
},
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}
});

$( ".hero-icon" )
.click(function() { 
    $("#dialog-form").dialog( "open" );
});

谁能告诉我如何实现我的目标，即为我生成的列表中的每个英雄显示一个模态框，并使用自己独特的信息？也许我需要在.js.erb文件中嵌入Ruby代码/循环，该文件为jQuery代码中的每个 hero-icon 和 dialog-form 附加一个唯一标识符（我有一个slug每个英雄），因为我可以轻松地为 hero-icon 类添加slug通过做：

<div class="hero-icon-<%= hero.friendly_id %>"></div>

如果我知道如何通过循环通过jQuery调用每个唯一生成的标识符 .