Вставить после динамического родительского div? - PullRequest
Новая
       46

Вставить после динамического родительского div?

0 голосов
/ 10 октября 2018

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

У меня есть 2 всплывающих окна.С элементом загрузчика (я использую внешнюю библиотеку) у меня проблема в том, что мой загрузчик загружается до всплывающего окна.

Загрузчик отлично работает, когда он находится на странице индекса,но когда он во всплывающем окне, он не загружается правильно.

Моя идея (я не уверен, что это сработает), но попытаться загрузить загрузчик после текущего родительского div (если его индекс или всплывающее окно)).

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

Я пробовал это: 

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement, fileOPs);
$("uploader").insertAfter(this);

также пытался 

$("uploader").insertAfter(this.div);

Но не повезло.Есть ли способ сделать то, что я пытаюсь?Спасибо!

1 Ответ

0 голосов
/ 10 октября 2018

Если код начинается с элемента, который не является div, и вы хотите найти ближайшего предка div, используйте this.closest("div").

Вот пример (Ванильный JavaScript): 

document.getElementById("level3").addEventListener("click", function(evt){
  console.log(this.parentNode.closest("div").id);
});
<div id="level1">
  <div id="level2">
    <span id="level3">Click Me</span>
  </div>
</div>

Если код начинается с div и вы хотите найти ближайшего предка div, используйте this.parentNode.closest("div").

Вот пример (Vanilla JavaScript): 

document.getElementById("level3").addEventListener("click", function(evt){
  console.log(this.parentNode.closest("div").id);
});
<div id="level1">
  <div id="level2">
    <div id="level3">Click Me</div>
  </div>
</div>

Для JQuery вы будете использовать следующее независимо от типа элемента, из которого происходит код: 

$("#level3").on("click", function(evt){
  console.log($(this).closest("div").get(0).id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="level1">
  <div id="level2">
    <span id="level3">Click Me</span>
  </div>
</div>

Как только вы ссылаетесь на правильный элемент, вы можете вставить новый узел по мере необходимости.

...