Как использовать <template> с динамическими идентификаторами?
Учитывая такой HTML-шаблон:
<template id = "paragraph-template">
<p>Hi, I am a paragraph</p>
</template>
Я загружаю и добавляю этот шаблон через JS, например:
let templateInstance = document.getElementById("paragraph-template");
myContainer.appendChild(templateInstance)
Теперь я хотел бы добавить шаблон несколько раз (т.е. в цикле for), и я хочу, чтобы каждый элемент <p> имел уникальный идентификатор, поэтому результат будет выглядеть, например:
<div>
<p id = "p1">Hi, I am a paragraph</p>
<p id = "p2">Hi, I am a paragraph</p>
<p id = "p3">Hi, I am a paragraph</p>
<div>
Как я могу добиться этого с помощью HTML-шаблонов?
Обновлено: Пример, который я привожу здесь, минимизирован — у меня есть шаблон с множеством элементов, каждый из которых должен получить уникальный идентификатор.
@Archer, мой пример просто не был таким обширным - я бы просто добавил один и тот же постфикс для каждого клонированного шаблона к существующему уникальному идентификатору каждого элемента, чтобы клонированные элементы не имели одинаковый идентификатор. Итак, мой вопрос — в некотором смысле — был о том, чтобы не нарушать правило «1 экземпляр идентификатора»;)
Затем вы должны опубликовать что-то, имеющее отношение к вашему варианту использования, показывая, что вы не нарушаете другие вещи. Применить идентификатор и даже обеспечить его уникальность просто, но мы не умеем читать мысли.
Да… Признаюсь, мой вопрос был не так ясен, как я думал – я пытался убрать все лишнее, но нужно было оставить самое необходимое. Я отредактирую свой вопрос позже (сейчас в спешке - возможно, это усугубит ситуацию ^^), чтобы отразить, что я действительно имел в виду (и каково было мое решение этой проблемы). Поскольку ответ Ehcnalbs решает проблему для описанного случая, я принял ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я предлагаю тебе :
let templateInstance = document.getElementById("paragraph-template");
for(var i=1;i<4;i++){
let clone = document.importNode(templateInstance .content, true);
clone.querySelector('p').id = "p"+i;
myContainer.appendChild(clone);
}
Да, это будет работать с примером, который я использовал здесь. К сожалению, шаблон из моего варианта использования содержит множество элементов, каждый из которых должен иметь уникальный идентификатор. Есть ли функция добавления серийного номера ко ВСЕМ идентификаторам элементов? @Arindam Sarkar - тогда проголосуйте за ответ;)
@kai-dj работает с любым числовым элементом, так в чем проблема?
Я так понимаю, в 1 контенте несколько элементов нужно ставить разные id? Может быть, вы можете использовать внешнее целое число из цикла и увеличивать для каждого идентификатора
@Supersharp Я просто подозревал, что будет больше <template> конечно, мою проблему можно было бы решить с помощью этого метода, но это много ручной работы ^^ … Сейчас я выбрал другой подход: контроллер grails, который берет постфикс, добавляет его к идентификатору и возвращает шаблон.
@Ehcnalb Я должен был сделать свой пример более понятным… ведь у элементов уже был уникальный идентификатор, который я хотел расширять последовательным постфиксом каждый раз, когда я добавляю содержимое шаблонов, поэтому элементы одного экземпляра шаблона связаны, а идентификаторы будут отличаться от других элементов экземпляров.
Копирование самого элемента шаблона нарушит правило «1 экземпляр идентификатора». Можете ли вы объяснить Зачем, что вы пытаетесь сделать то, что пытаетесь сделать, потому что может быть гораздо более простой способ достичь конечного результата.