jquery之如何为列表中的每个项目创建一个唯一的 Jquery 对话框

我正在 Jinja2 的帮助下用 Python 构建一个基于浏览器的应用程序，我想为文件列表中的每个项目添加一个对话框。例如，我的 Python/Jinja2 生成以下 HTML:

<div id="dialog">Unique data goes here.</div> 
... 
<li class="ui-widget-content">something.pdf</li>  
<li class="ui-widget-content">something else.zip</li>  
<li class="ui-widget-content">something else(1).zip</li> 
... 

我想要每一个 <li>调用显示对话框的 Javascript，并且每个对话框都包含与列表中的文件相关的唯一信息。这个列表也在不断变化。这是我到目前为止的 JS 代码，但这只会为每个 <li> 显示列表中的第一项。标签:

$.fx.speeds._default = 1000; 
$(function() { 
    $( "#dialog" ).dialog({ 
        autoOpen: false, 
        show: "slide", 
        hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
  $("#selectable").children("li").each(function() { 
      $(this).mouseover(function(){ 
          $(this).css("background-color","#FECA40"); 
      }); 
      $(this).mouseout(function(){ 
          $(this).css("background-color","white"); 
      }); 
      $(this).click(function(){ 
          $("#dialog").dialog( "open" ); 
          return false; 
    }); 
  }); 
}); 

我是 Javascript 的新手，完全迷失在这个方面。我能想到的唯一方法是分配一个唯一的 id每个 <div>然后为每个id创建一个对应的函数.由于列表超过 300 个文件，这似乎不是一个明智的主意。给每个人最好的方法是什么 <li>标记它自己独特的对话框？谢谢!

请您参考如下方法:

这个有用吗？

$.fx.speeds._default = 1000; 
$(function() { 
    $( "#dialog" ).dialog({ 
        autoOpen: false, 
        show: "slide", 
        hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
  $("#selectable").children("li").each(function() { 
      $(this).mouseover(function(){ 
          $(this).css("background-color","#FECA40"); 
      }); 
      $(this).mouseout(function(){ 
          $(this).css("background-color","white"); 
      }); 
      $(this).click(function(){ 
          // if no dialog has been created for this li 
          if (!$(this).data('dialog')) { 
              // initialize one 
              $(this).data('dialog',  
                  $('<div />') 
                      //.text($(this).text()) // set the text of the dialog 
                      .load('someurl.php?file=' + encodeURIComponent($(this).text())) // set content by ajax request 
                      .dialog({autoOpen: false}) 
              ); 
          } 
          var dlg = $(this).data('dialog'); 
          dlg.dialog( "open" ); 
          return false; 
    }); 
  }); 
});