Назначить каскадные идентификаторы в динамически вложенных элементах (JavaScript)

Question

Я работаю над сценарием, который динамически генерирует 3 различных компонента для построения сетки: раздел -> строка -> модуль. Сейчас я работаю над функцией обновления, которая должна обновлять идентификаторы каждого элемента, присутствующего в сетке, сразу после создания нового компонента:

function Update() {

    // Define components variables
    var sections = document.querySelectorAll('#canvas [data-component="section"]');
    var rows = document.querySelectorAll('#canvas [data-component="row"]');
    var modules = document.querySelectorAll('#canvas [data-component="module"]');

    /**
     * Assign IDs to each existing section, row and module
     */
    // If there are sections...
    if ( sections.length > 0 ) {

        for ( var x = 0; x < sections.length; x++ ) {

            sectionNum = x + 1; 
            sections[x].id = 'component-' + sectionNum;

            // If there are rows...
            if ( rows.length > 0 ) {

                for ( var y = 0; y < rows.length; y++ ) {

                    // If this row is a descendant of that section...
                    if ( rows[y].parentElement.parentElement == sections[x] ) {

                        rowNum = y + 1; 
                        rows[y].id = 'component-' + sectionNum + '-' + rowNum;

                        // If there are modules...
                        if ( modules.length > 0 ) {

                            for ( var z = 0; z < modules.length; z++ ) {

                                // If this module is a descendant of that row...
                                if ( modules[z].parentElement.parentElement == rows[y] ) {

                                    moduleNum = z + 1;
                                    modules[z].id = 'component-' + sectionNum + '-' + rowNum + '-' + moduleNum;
                                };
                            };

                            // If the loop has reached the end, reset the index and break
                            if ( modules.length - 1 === z ) { z = 0; break };
                        };
                    };

                    // If the loop has reached the end, reset the index and break
                    if ( rows.length - 1 === y ) { y = 0; break; };
                };
            };

            // If the loop has reached the end, reset the index and break
            if ( sections.length - 1 === x ) { x = 0; break; };
        };
    };
};

Мне кажется, я достаточно близок к тому, чтобы закончить, но я изо всех сил пытался найти способ генерировать нужный мне результат.

Вот что я сейчас получаю:

#component-1
    #component-1-1
        #component-1-1-1
        #component-1-1-2
    #component-1-2
        #component-1-2-3
        #component-1-2-4
#component-2
    #component-2-3
        #component-2-3-5
        #component-2-3-6
    #component-2-4
        #component-2-4-7
        #component-2-4-8

Но мне нужно сбросить номер строки и модуля в каждом новом разделе, например:

#component-1
    #component-1-1
        #component-1-1-1
        #component-1-1-2
    #component-1-2
        #component-1-2-1
        #component-1-2-2
#component-2
    #component-2-1
        #component-2-1-1
        #component-2-1-2
    #component-2-2
        #component-2-2-1
        #component-2-2-2

Любые идеи будут более чем приветствоваться:)

Answer 1

Еще раз я заканчиваю тем, что отвечаю на свой собственный вопрос: P В случае, если это может быть полезно кому-то еще здесь, это идет.

Прежде всего, вот окончательный код:

/**
 * Update Components
 */
function Update() {

    /**
     * Assign IDs to each section, row and module
     */
    // Grab the sections contained in the canvas
    var sections = document.querySelectorAll('#canvas [data-component="section"]');

    if ( sections.length > 0 ) {

        for ( var x = 0; x < sections.length; x++ ) {

            // Increase num by 1 to avoid "0" as first index
            var sectionNum = x + 1;

            // Assign an ID to the current section
            sections[x].id = 'component-' + sectionNum;

            // Grab the rows contained in this section
            var rows = document.querySelectorAll('#' + sections[x].id + ' [data-component="row"]');

            if ( rows.length > 0 ) {

                for ( var y = 0; y < rows.length; y++ ) {

                    // Increase num by 1 to avoid "0" as first index
                    var rowNum = y + 1;

                    // Assign an ID to the current row
                    rows[y].id = 'component-' + sectionNum + '-' + rowNum;

                    // Grab the modules contained in this row
                    var modules = document.querySelectorAll('#' + rows[y].id + ' [data-component="module"]');

                    if ( modules.length > 0 ) {

                        for ( var z = 0; z < modules.length; z++ ) {

                            // Increase num by 1 to avoid "0" as first index
                            var moduleNum = z + 1;
                            // Assign ID to module
                            modules[z].id = 'component-' + sectionNum + '-' + rowNum + '-' + moduleNum;
                        }
                    }
                }
            }
        }
    }
}

В итоге я определил переменные для строк и модулей в предыдущем цикле, и это, наконец, дало результат (определил переменную строк внутри цикла секций и переменную модулей внутри цикла строк). Если вы задаетесь вопросом, почему, именно потому, что, делая это таким образом, я смог использовать идентификатор текущего родителя, чтобы ограничить поиск дочерними объектами, содержащимися в этом конкретном родителе, а затем перезапустить счетчик при зацикливании нового родителя.

Это второстепенная деталь, но я также удалил сброс переменных цикла в конце каждого цикла, которые даже не были необходимы.

И, как плюс, в jQuery то же самое:

/**
 * Update Components
 */
function Update() {

    /**
     * Assign IDs to each section, row and module
     */
    // Grab the sections contained in the canvas
    var sections = $('#canvas [data-component="section"]');

    if ( sections.length > 0 ) {

        $(sections).each( function(x) {

            // Increase num by 1 to avoid "0" as first index
            var sectionNum = x + 1;

            // Assign an ID to the current section
            $(this).attr('id', 'component-' + sectionNum);

            // Grab the rows contained in this section
            var thisSectionID = this.id;
            var rows = $('#' + thisSectionID).find('[data-component="row"]');

            if ( rows.length > 0 ) {

                $(rows).each( function(y) {

                    // Increase num by 1 to avoid "0" as first index
                    var rowNum = y + 1;

                    // Assign an ID to the current row
                    $(this).attr('id', 'component-' + sectionNum + '-' + rowNum);

                    // Grab the modules contained in this row
                    var thisRowID = this.id;
                    var modules = $('#' + thisRowID).find('[data-component="module"]');

                    if ( rows.length > 0 ) {

                        $(modules).each( function(z) {

                            // Increase num by 1 to avoid "0" as first index
                            var moduleNum = z + 1;

                            // Assign an ID to the current module
                            $(this).attr('id', 'component-' + sectionNum + '-' + rowNum + '-' + moduleNum);
                        });
                    };
                });
            };
        });
    };

Надеюсь, это поможет кому-то там! :)