jquery dialog () - ловить только div рядом с открывателем

Question

Я пытаюсь настроить несколько диалогов на одной странице, пытаясь открыть только один рядом с открывателем эс.

<ul>
  <li class="dialog">
     <a class="opener" href="#">1</a>
     <div class="modal" title="Title for 1">Content for 1</div>
  </li>

  <li class="dialog">
     <a class="opener" href="#">2</a>
     <div class="modal" title="Title for 2">Content for 2</div>
  </li>
</ul>

и jquery:

    $(".modal").dialog({
        autoOpen: false,
        zIndex: 3999,
        modal: true
    });


    $('.opener').click(function() {
        $(this).next().dialog('open');
    });

но $ (this) .next (). Dialog ('open'); всегда дает мне неопределенность! где я терплю неудачу? :( спасибо:)

Answer 1

Вам необходимо сохранить ссылку на диалоговое окно, например:

$(".opener").each(function() {
  $.data(this, 'dialog', $(this).next());
}).click(function() {
  $.data(this, 'dialog').dialog('open');
});
$(".modal").dialog({
  autoOpen: false,
  zIndex: 3999,
  modal: true
});

Вы можете проверить это здесь . Причина, по которой вы делаете это, заключается в том, что когда вы вызываете .dialog(), он перемещает вновь обернутый элемент в конец тела, непосредственно перед </body> ...., поэтому он больше не является следующим элементом.

Answer 2

Если в каждом li есть только один div, вы можете использовать find ().

 $(this).parent().find("div")

даст вам div внутри li, на который нажали