在动态嵌套元素中分配级联 ID (JavaScript)
Assign cascaded IDs in dynamically nested elements (JavaScript)
我正在编写一个脚本,该脚本动态生成 3 个不同的组件来构建网格:部分 -> 行 -> 模块。现在我正在研究更新功能,它应该能够在创建新组件后立即更新网格中存在的每个元素的 ID:
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
任何想法都将非常受欢迎:)
最后我又一次回答了我自己的问题 :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;
}
}
}
}
}
}
}
我最终在之前的循环中为行和模块定义了变量,这最终成功了(在 sections 循环中定义了行变量,在行循环中定义了模块变量)。如果您想知道为什么,那是因为这样做我能够使用当前父级的 ID 将搜索限制在该特定父级包含的子级中,然后在循环新父级时重新开始计数。
这是次要细节,但我还删除了每个循环结束时的循环变量重置,这甚至不是必需的。
此外,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);
});
};
});
};
});
};
希望它能帮助到那里的人! :)
我正在编写一个脚本,该脚本动态生成 3 个不同的组件来构建网格:部分 -> 行 -> 模块。现在我正在研究更新功能,它应该能够在创建新组件后立即更新网格中存在的每个元素的 ID:
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
任何想法都将非常受欢迎:)
最后我又一次回答了我自己的问题 :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;
}
}
}
}
}
}
}
我最终在之前的循环中为行和模块定义了变量,这最终成功了(在 sections 循环中定义了行变量,在行循环中定义了模块变量)。如果您想知道为什么,那是因为这样做我能够使用当前父级的 ID 将搜索限制在该特定父级包含的子级中,然后在循环新父级时重新开始计数。
这是次要细节,但我还删除了每个循环结束时的循环变量重置,这甚至不是必需的。
此外,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);
});
};
});
};
});
};
希望它能帮助到那里的人! :)