如何访问由jQuery对话框引用的div元素？

Question

我有一些JavaScript代码whcih创建了一个对话框，看起来是这样的：

$(function() { 
    $('.hoverList').dialog({ 
    autoOpen: false, 
    hide: { 
     effect: "fade", 
     duration: 400 
    }, 
    title: $(this).data("title"), 
    modal: false 
});}; 

在这种情况下，可以在页面上的多个hoverlist类元素。我遇到的问题是这条线上面：

title: $(this).data("title") 

在我的PAG，包含我的对话框股利如下：

<div class='hoverlist' data-title='My Dialog Title'>...</div> 

当的JavaScript虽然运行，$（本）在对话框的'title：'键中返回，指的是文档本身，而不是该对话框指令适用的元素，因此<div>元素的数据（“标题”）在此处不可访问。

请注意，在同一页面上可能会有多个悬浮列表，因此我不能仅通过一个ID而不是一个类来选择它，而无需重复重新创建相同的代码。试图找出我可以如何构建对话框，其标题是<div>的数据元素中引用的标题，我将其转变为对话框。这怎么可能？

Answer 1

如果你想这样做，那么你需要遍历jQuery选择器对象，以便'$（this）'指向当前节点。

$(function() { 

    $('.hoverList').each(function(){ 
     $(this).dialog({ 
      autoOpen: false, 
      hide: { 
       effect: "fade", 
       duration: 400 
      }, 
      title: $(this).data("title"), 
      modal: false 
     }); 
    }); 
});