Question

我正在尝试确定是否可以在弹出式加载后插入要加载的元素。

我有2个弹出窗口。对于上载器元素（我正在使用外部库），我遇到的问题是上载器在弹出窗口之前加载。

将上传器放置在索引页面中时，它的工作效果非常好，但是在弹出窗口中，则无法正确加载。

我的想法（我不确定这是否可行），但是尝试在当前父div（如果它的索引或弹出窗口）之后加载上载器。

问题是我的平台每次页面加载时平台都会随机更改弹出ID和类，因此我需要直接引用当前父div的内容。

我尝试过：

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

也尝试过

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

但是没有运气。有什么办法可以做我想做的事吗？谢谢！

Answer 1

如果代码源自不是div的元素，并且您想查找最接近的祖先div，请使用this.closest("div")。

这是一个示例（Vanilla 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>

一旦您引用了正确的元素，就可以根据需要插入新节点。

在动态父div之后插入？

1 个答案: