Перезапись идентификатора одного элемента HTML текстом другого

Question

Я использую CMS Webflow (особенность CMS разработчика сайтов) для создания повторяющихся HTML-элементов. Webflow дублирует их автоматически. К сожалению, он также дублирует идентификаторы самого элемента и всех вложенных элементов, что делает их неуникальными. По разным причинам я должен использовать эту функцию.

Теперь я использую встроенный скрипт для перезаписи идентификатора определенного вложенного элемента HTML (заголовка) внутренним текстом другого (также заголовка). Оба элемента находятся внутри упомянутого элемента, который автоматически дублируется.

Текст второго заголовка (ссылочный заголовок, текст которого я хочу получить) автоматически заполняется функцией CMS и поэтому уникален.

Но когда я записываю новый Id первого заголовка на консоль (который был перезаписан внутренним текстом второго заголовка), он просто пуст. В следующем коде я добавил комментарии (// альтернативно :) с альтернативными строками кода, которые заставляют код работать, но не так, как хотелось бы.

<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");

Но, очевидно, всегда перезаписывает идентификатор на одно и то же значение каждый раз, поскольку это не относительный путь.

К сожалению, относительный путь не работает, файл console.log (newId) просто пуст в консоль (я полагаю, что эта строка является проблемой):

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

Я использовал следующее для проверки возможности создания уникального идентификатора при каждом дублировании элемента (это так)

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

Что я делаю не так?

Answer 1

Я бы предложил вам запросить все элементы с идентификатором и изменить их по своему усмотрению. Ваш скрипт-тег должен быть после всех дублированных элементов

Array.from(document.querySelectorAll("#duplicate"))
  .forEach((el, index) => {
    if (index > 0) {
      el.id = el.id + "-" + index;
    }
  });

Array.from(document.querySelectorAll("p"))
  .forEach((el, i) => {
    console.log(`Element index ${i}, id: ${el.id}`)
  });

<p id="duplicate">

</p>

<p id="duplicate">

</p>

<p id="duplicate">

</p>

Answer 2

Вы можете установить идентификатор элемента с данными Webflow CMS в пользовательском блоке встраивания HTML.

В элементе коллекции добавьте код для вставки, а затем кнопку «+ Добавить поле» позволит вам использовать данные CMS в коде.

Изображение для встраивания в Webflow:

Answer 3

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

Это просто находит элемент с идентификатором useMeToChangeId в $(this), который в $(document).ready() является (я предполагаю) документом. Это делает его почти идентичным простому вызову $('#useMeToChangeId');. И, конечно, это будет работать, если элемент с таким идентификатором существует на странице.

Вы могли бы проверить, действительно ли let elementWithReferenceText = $(event.target).parent().next("#useMeToChangeId"); что-то делает. Возможно, за родителем $(event.target) не следует элемент с идентификатором «useMeToChangeId». Вы проверили, содержит ли elementWithReferenceText значение? Э.Г.

console.log(elementWithReferenceText);

после того, как вы определите elementWithReferenceText?