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

我使用CMS Webflow（网站生成器的CMS功能）来构建重复的HTML元素。Webflow会自动复制这些内容。不幸的是，它还复制了元素本身和所有嵌套元素的ID，使它们不唯一。出于各种原因，我不得不使用此功能

现在，我使用一个嵌入式脚本用另一个嵌套HTML元素（标题）的内部文本覆盖特定嵌套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>

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

不幸的是，相对路径不起作用，console.log（newId）只将空日志记录到控制台（我假设这一行就是问题所在）：

我使用下面的代码来验证每次元素被复制时是否可以生成一个唯一的ID

---

我做错了什么？

让elementWithReferenceText=$（这个）

这只是在
$（This）
中找到id为UseMotochangeID的元素，在
$（document）.ready（）
中，它是（我假设）文档。这几乎等同于只调用
$（'useMeToChangeId'）。当然，如果页面上存在具有该ID的元素，这将起作用

您可以检查
是否让elementWithReferenceText=$（event.target）.parent（）.next（#useMeToChangeId”）实际上做了一些事情。可能
$（event.target）
的父元素后面没有ID为“UseMotochangeID”的元素。是否检查了
元素WithReferenceText
是否包含值？例如

console.log(elementWithReferenceText);

定义
elementWithReferenceText
？
之后，让elementWithReferenceText=$（this）。查找（“#useMeToChangeId”）

这只是在
$（This）
中找到id为UseMotochangeID的元素，在
$（document）.ready（）
中，它是（我假设）文档。这几乎等同于只调用
$（'useMeToChangeId'）。当然，如果页面上存在具有该ID的元素，这将起作用

您可以检查
是否让elementWithReferenceText=$（event.target）.parent（）.next（#useMeToChangeId”）实际上做了一些事情。可能
$（event.target）
的父元素后面没有ID为“UseMotochangeID”的元素。是否检查了
元素WithReferenceText
是否包含值？例如

console.log(elementWithReferenceText);

在您使用ReferenceText定义
元素之后，
我建议您查询具有ID的所有元素，并根据需要更改它们。脚本标记必须位于所有已复制的元素之后


Array.from（document.querySelectorAll（“#复制”））
.forEach（（el，索引）=>{
如果（索引>0）{
el.id=el.id+“-”+索引；
}
});
from（document.querySelectorAll（“p”））
.forEach（（el，i）=>{
log（`Element index${i}，id:${el.id}`）
});





我建议您查询ID为的所有元素，并根据需要更改它们。脚本标记必须位于所有已复制的元素之后


Array.from（document.querySelectorAll（“#复制”））
.forEach（（el，索引）=>{
如果（索引>0）{
el.id=el.id+“-”+索引；
}
});
from（document.querySelectorAll（“p”））
.forEach（（el，i）=>{
log（`Element index${i}，id:${el.id}`）
});





您可以在自定义HTML嵌入块中使用Webflow CMS数据设置元素的id

在集合项中，添加嵌入，然后“+添加字段”按钮将允许您在代码中使用CMS数据

Webflow嵌入图像：

您可以在自定义HTML嵌入块中使用Webflow CMS数据设置元素的id

在集合项中，添加嵌入，然后“+添加字段”按钮将允许您在代码中使用CMS数据

Webflow嵌入图像：

感谢您的回复。我确实记录了：
elementWithReferenceText
到控制台，它打印了以下内容：
w.fn.init[prevObject:w.fn.init（0）]长度：0 prevObject:w.fn.init[prevObject:w.fn.init]\uu proto\uu:Object（0）
并没有记录：
elementWithReferenceText.text（）。这也让我相信
$（event.target）.parent（）.next（#usemotochangeid”）未选择正确的元素。但从HTML结构来看，它应该是，我不知道如何识别它选择的元素。你确定该元素是所选元素的第一个下一个同级元素吗？因为这就是
next（）
所选择的。也许可以尝试在不使用
#useMeToChangeId
选择器的情况下执行
next（）
，然后查看输出？控制台日志显示jQuery选择了某些内容，但其长度为0，因此实际上未选择任何内容。也许下一个元素不是#UseMotochangeID？谢谢你的回答。我确实记录了：
elementWithReferenceText
到控制台，它打印了以下内容：
w.fn.init[prevObject:w.fn.init（0）]长度：0 prevObject:w.fn.init[prevObject:w.fn.init]\uu proto\uu:Object（0）
并没有记录：
elementWithReferenceText.text（）。这也让我相信
$（event.targ
let newId = Math.floor(Math.random()*6)

console.log(elementWithReferenceText);