повторить div с текстовыми полями и изменить идентификатор с помощью javascript

Question

Я пытаюсь перебрать все текстовые поля, помещенные в <div class="col-md-2">, используя javascript, чтобы изменить их идентификаторы следующим образом ..

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = children[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

Результат, который я ищу for is this ...

<div id="divcontent">
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
    </div>
<div class="form-group" id="subContent">
    <div class="col-md-2">
      <input type="text" name="events[1].Key" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.StartDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.EndDate" value="">
    </div>
    <div class="col-md-2">
      <input type="text" name="events[1].Value.Description" value="">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>

Но я получаю ошибку "ReferenceError: children is notfined" в javascript при запуске функции javascript. Может кто-нибудь помочь, пожалуйста?

ОБНОВЛЕНИЕ После изменения функции результат теперь выглядит следующим образом ..

<div id="divcontent">

<div class="form-group" id="subContent">
    <div class="col-md-2" id="events[0].Value.Description">
      <input type="text" name="events[0].Key" value="">
    </div>
    <div class="col-md-2" id="events[1].Value.Description">
      <input type="text" name="events[0].Value.StartDate" value="">
    </div><div class="col-md-2" id="events[2].Value.Description">
      <input type="text" name="events[0].Value.EndDate" value="">
    </div>
    <div class="col-md-2" id="events[3].Value.Description">
      <input type="text" name="events[0].Value.Description" value="">
    </div>
    <div class="col-md-2" id="events[4].Value.Description">
      <button type="button" class="btn btn-sm btn-primary" onclick="RemoveTextBox(this)"><i class="fa fa-angle-right"></i> Remove</button>
    </div>
</div>

при использовании этого кода ..

    function iterateBoxesAndSetUniqueIds() {

    var childDivs = document.getElementById('subContent').children;
    //alert(childDivs.length);

    for( i=0; i< childDivs.length; i++ )
    {
        var el = childDivs[i];
        el.name = 'events[' + i + '].Key'; // 
        el.id = 'events[' + i + '].Key';

        el.name = 'events[' + i + '].Value.StartDate'; 
        el.id = 'events[' + i + '].Value.StartDate';

        el.name = 'events[' + i + '].Value.EndDate'; 
        el.id = 'events[' + i + '].Value.EndDate';

        el.name = 'events[' + i + '].Value.Description'; 
        el.id = 'events[' + i + '].Value.Description';
    }

Answer 1

Прежде всего, причина ReferenceError: children не определена, это код

 var el = children[i];

Если вы измените его на:

var el = childDivs[i];

Вы получите результат, где он изменяется 0,1,2,3,4 для первого ТОЛЬКО ПЕРВОГО субконтента, что не совсем то, что вы действительно хотите.

Итак, вы хотели бы использовать querySelector для получения всех субконтентов. Оттуда мы можем изменить каждое отдельное содержимое этого указанного c субконтента.

Предполагая, что для каждого субконтента есть только 4 поля, это ваше решение

     function iterateBoxesAndSetUniqueIds() {

    var subContents = document.querySelectorAll("#subContent")

    //LOOPS OVER ALL SUBCONTENTS
    for (i = 0; i < subContents.length; i++) {
        var children = subContents[i].children
        console.log(children)
        children[0].children[0].name = 'events[' + i + '].Key';
        children[1].children[0].name = 'events[' + i + '].Value.StartDate';
        children[2].children[0].name = 'events[' + i + '].Value.EndDate';
        children[3].children[0].name = 'events[' + i + '].Value.Description';
    }
}

Позвольте мне объяснить этот код:

1. Получить все подконтроль

2. Для за каждый субконтент я получу всех его детей

3. для каждого ребенка aka <div class="col-md-2"> имеет 1 ребенка input field, поэтому я использую children[0], поэтому я изменяю имя этого

Answer 2

В вашем для l oop у вас есть children[i], измените это на childDivs[i].

Вы ссылаетесь на переменную children, которая не существует в вашем l oop. Вам необходимо получить доступ к каждому значению, содержащемуся в nodeList childDivs

. Чтобы решить вторую проблему, вам нужно использовать индекс итерации i как переменную, а не передавать ее как строку. Например:

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = events[i].Key; // 
    el.id = events[i].Key;

    el.name = events[i].Value.StartDate; 
    el.id = events[i].Value.StartDate;

    el.name = events[i].Value.EndDate; 
    el.id = events[i].Value.EndDate;

    el.name = events[i].Value.Description; 
    el.id = events[i].Value.Description;
}

Хотя в каждой итерации l oop вы теперь устанавливаете имя и идентификатор по-разному 4 раза. Вам нужно подумать, какое значение вы хотите установить для идентификатора и имени, и просто сделайте это один раз. Например:

for( i=0; i< childDivs.length; i++ ) {
    var el = childDivs[i];

    el.name = events[i].Key;
    el.id = events[i].Key;
}

Обязательно измените events[i].Key на правильное свойство, которое вы хотите использовать. Также я избавился от кавычек вокруг events[i].Key, так как они не нужны.

Answer 3

Вы используете var children и его не существует. Правильная переменная это childDivs. Вот исправление:

function iterateBoxesAndSetUniqueIds() {

var childDivs = document.getElementById('subContent').children;
//alert(childDivs.length);

for( i=0; i< childDivs.length; i++ )
{
    var el = childDivs[i];
    el.name = 'events[' + i + '].Key'; // 
    el.id = 'events[' + i + '].Key';

    el.name = 'events[' + i + '].Value.StartDate'; 
    el.id = 'events[' + i + '].Value.StartDate';

    el.name = 'events[' + i + '].Value.EndDate'; 
    el.id = 'events[' + i + '].Value.EndDate';

    el.name = 'events[' + i + '].Value.Description'; 
    el.id = 'events[' + i + '].Value.Description';
}