javascript - 用另一个 HTML 元素的文本覆盖一个 HTML 元素的 ID

Question

我使用 CMS Webflow(网站构建器的 CMS 功能)来构建重复的 HTML 元素。 Webflow 会自动复制这些。不幸的是，它还会复制元素本身和所有嵌套元素的 ID，使它们不唯一。由于种种原因，我不得不使用这个功能。

现在我使用嵌入式脚本用另一个(也是标题)的 innerText 覆盖特定嵌套 HTML 元素(标题)的 ID。这两个元素都位于提到的自动复制的元素内。

第二个标题文本(我想抓取其文本的引用标题)由 CMS 功能自动填充，因此是唯一的。

但是当我将第一个标题的新 Id 记录到控制台时(它被第二个标题的 innerText 覆盖)，它只是空的。在下面的代码中，我添加了带有替代代码行的注释(//或者:)，这使得代码可以工作，但不是我们想要的。

<script>
    $(document).ready(function(event) { 

    let elementToBeChanged = $(event.target).next("#changeMyId");
    let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");
    // alternatively: let elementWithReferenceText = $(this).find("#useMeToChangeId");

    let newId = elementWithReferenceText.text();
    // alternatively: let newId = Math.floor(Math.random()*6) // to verify that generating a unique ID each time the element gets duplicated is possible (it is)

    console.log(newId) // to compare with console.log(elementToBeChanged.id) if ID was changed correctly
    elementToBeChanged.id = newId;
    console.log(elementToBeChanged.id); // to check if ID was changed 
});
</script>

我认为代码的问题是没有选择正确的第二个标题。奇怪的是，这个 jQuery 选择器可以正常工作:

let elementWithReferenceText = $(this).find("#useMeToChangeId");

但显然每次都会用相同的值覆盖 ID，因为它不是相对路径。

不幸的是，相对路径不起作用，控制台的 console.log(newId) 日志只是空的(我假设这一行是问题所在):

let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId");

我使用以下内容来验证每次元素被复制时生成一个唯一的 ID 是可能的(它是)

let newId = Math.floor(Math.random()*6)

我做错了什么？

Answer 1

let elementWithReferenceText = $(this).find("#useMeToChangeId");

这只是在 $(this) 中找到 ID 为 useMeToChangeId 的元素，它在 $(document).ready() 中, 是(我假设)文件。这使得它几乎等同于仅调用 $('#useMeToChangeId');。当然，如果页面上存在具有该 ID 的元素，这将起作用。

您可以检查 let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId"); 是否确实做了一些事情。可能 $(event.target) 的父元素后面没有 ID 为“useMeToChangeId”的元素。您是否检查过 elementWithReferenceText 是否包含值？例如

console.log(elementWithReferenceText);

在定义 elementWithReferenceText 之后？