jQuery - сделать элемент последним в DOM (до закрытия тела) даже после динамически сгенерированных элементов - PullRequest
Новая
       16

jQuery - сделать элемент последним в DOM (до закрытия тела) даже после динамически сгенерированных элементов

6 голосов
/ 10 февраля 2012

tl; dr: Как получить элемент DOM, который отображается обработчиком щелчка, как последний элемент перед закрытием body, даже если динамически генерируемые элементы добавляются?

По сути, я хочу, чтобы щелчок, открывающий элемент, также перемещал его в DOM, чтобы он был последним перед закрытием тела, даже после добавления некоторых динамических элементов.

Моя проблема связана с модальным, который открывается в другом модале, в то время как на одной странице есть несколько модальных модов. Один улов заключается в том, что подмодалы существуют в DOM при загрузке страницы, в то время как первичные модалы создаются по щелчку (субмодалы используют другой код для генерации, в то время как первичные используют jQuery UI диалог).

Если вы откроете модальный, а затем откроете субмодальный, все хорошо. Если вы откроете второй модал, то закроете его, когда откроете первый модал, субмодал не появится, так как он скрыт под вторым модалом. Если я добавляю эти субмодалы к телу, таким образом, помещая их после любых сгенерированных модалов, они выглядят хорошо (но это создает другие проблемы). Несмотря на то, что это выглядит так, как будто это не проблема z-index (я попробовал все, что с этим связано, не повезло), похоже, это связано с тем, где эти модалы расположены в DOM.

Код может быть понятнее:

Вот как выглядит HTML при загрузке страницы: 

<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>

После того, как вы нажмете, чтобы открыть первое основное модальное окно: 

<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>

После того, как вы щелкнете, чтобы открыть подмодаль этого модала, я должен переместить подмодал так, чтобы он находился ниже основного модала, иначе он не появится (и опять же, z-index не влияет на эту блокировку): 

$('#submodal_1').insertAfter('#primary_modal_1');

В этот момент, если вы закроете это #primary_modal_1, оно будет скрыто, но все еще будет в DOM. Если вы откроете секунду, код теперь будет выглядеть так: 

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>

В этот момент, если вы снова откроете первый основной модал и попытаетесь открыть его подмодальный, субмодальный не появится. Однако, если вы переместите подмодал так, чтобы он находился ниже этого последнего основного мода, например, так: 

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>

Подмодал будет отображаться правильно. Я хочу убедиться, что подмодалы всегда последние в DOM, независимо от того, сколько основных модальностей добавлено.

Ответы [ 3 ]

7 голосов
/ 10 февраля 2012

Метод добавления JQuery «Вставить содержимое, заданное параметром, в конец каждого элемента в наборе соответствующих элементов.» 

$('body').append(...);

Вам придется каждый раз перемещать элементчто-то добавляется динамически.

Проверьте это JSFiddle: http://jsfiddle.net/eZ2Dq/

3 голосов
/ 10 февраля 2012

Взгляните на метод jQuery appendTo.

1 голос
/ 10 февраля 2012

Вы всегда можете клонировать элемент, добавить клон в конец тега <body>, затем удалить исходный элемент.

Роб W указал, что клонирование не является необходимым, из-за вызова append для существующего элемента, автоматически удаляющего его из предыдущей позиции. Имея это в виду, вы можете расширить свой код, чтобы открыть новое модальное окно, чтобы сделать что-то вроде этого: 

$('.submodal').appendTo('body');

, который должен (при условии, что я правильно понимаю API) перетасовать все субмодальные элементы (идентифицируемые классом submodal) до конца тега <body>.

...