Как получить доступ к элементу div, указанному в диалоговом окне jquery?

Question

У меня есть некоторый код яваскрипта whcih создает диалог, который выглядит примерно так:

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

В этом случае может быть несколько элементов класса hoverlist на этой странице. Проблема, которую я имею с этой линией выше:

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

На мой вол, в DIV, который содержит диалоговое окно, мой выглядит следующим образом:

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

Когда Javascript работает, хотя, $ (это), возвращаемое в «title:» в диалоговом окне, ссылается на сам документ, а не на элемент, к которому применяется эта директива диалогового окна, поэтому данные («название») элемента <div> недоступны здесь.

Обратите внимание, что на одной странице может быть несколько hoverlists, поэтому я не могу просто выбрать его с помощью идентификатора вместо класса без повторного повторного создания одного и того же кода. Попытка выяснить, как я могу построить диалог с названием, упомянутым в элементе данных <div>, который я превращаю в диалог. Как это возможно?

Answer 1

Если вы хотите это сделать, вам нужно будет пройти через объект селектора jQuery, так что '$ (this)' относится к текущему узлу.

$(function() { 

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