Wie bekomme ich Zugriff auf das div-Element, auf das sich ein jquery-Dialog bezieht?

Question

Ich habe ein paar Javascript-Code Whcih einen Dialog erzeugt, die etwa wie folgt aussieht:

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

In diesem Fall gibt es auf der Seite mehrere hoverlist Klasse Elemente vorhanden sein kann. Das Problem, das ich habe, ist, mit dieser Linie in der oben:

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

Auf meiner pag, die div, dass mein Dialog enthält sieht wie folgt aus:

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

Wenn das Javascript läuft aber $ (this) zurückgegeben in der 'title:' Taste des Dialogs bezieht sich auf das Dokument selbst, nicht auf das Element, für das diese Dialog-Direktive gilt, so dass Daten ("title") des <div> Elements hier nicht zugänglich sind.

Beachten Sie, dass es mehrere Hoverlisten auf der gleichen Seite gibt, so dass ich es nicht einfach durch eine ID anstelle einer Klasse auswählen kann, ohne denselben Code wiederholt zu erstellen. Ich versuche herauszufinden, wie ich den Dialog mit dem Titel erstellen kann, auf den im Datenelement von <div> verwiesen wird, das ich in einen Dialog verwandele. Wie könnte das möglich sein?

Answer 1

Wenn Sie dies tun möchten, müssen Sie das jQuery-Selector-Objekt durchlaufen, so dass '$ (this)' sich auf den aktuellen Knoten bezieht.

$(function() { 

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