Javascript 为什么ForEach只注册数组中的第一个元素？ 目标

我试图将每个奖项类别的高度限制为3个奖项的总高度。原因是它是动态的，高度可能会根据用户输入的奖励信息而有所不同

链接到CodePen以了解更多上下文：

问题 出于某种原因，只有第一个元素被注册了，我不知道为什么

根据该错误，循环中的下一项未定义，但如果我将其记录在循环之外，则会拾取该项，如下所示

awardCatContainers[0]。querySelectorAll（'.award'）

代码

const awardCatContainers=document.queryselectoral（“.award category container”）；
const button=document.querySelector（'.award.button'）；
awardCatContainers.forEach（（容器）=>{
let awards=container.querySelectorAll（'.award'）；
let height=getContainerHeight（奖励）；
container.style.maxHeight=高度+px'；
});
函数getContainerHeight（containerChildren）{
设高度=0；
for（设a=0；a=maxelms）{
让高度=设置容器高度（奖励）；
容器[c].style.maxHeight=height+'px'；
}
}
//获取子元素数组，并使用前3个元素的总离地距离创建高度
函数setContainerHeight（containerChildren）{
设高度=0；
for（设a=0；a

查询选择器返回一个静态节点列表。因此，当运行此代码时，页面中可能只呈现一个元素。您可以尝试向该代码添加超时。这将帮助您调试问题

但不要将此作为最终代码。因为您永远无法确定超时时间。如果网络速度太慢，加载元素可能需要3秒钟以上。查看承诺或回调并实现最终代码。如果在创建元素之前进行AJAX调用以获取数据，请使用AJAX提供的回调来确定AJAX调用是否完成

const awardCatContainers = document.querySelectorAll( '.award-category-container' );
const button = document.querySelector( '.award .button' );
// set a timeout
setTimeout(() => {awardCatContainers.forEach( (container) => {
    let awards = container.querySelectorAll( '.award' );
    let height = getContainerHeight(awards);

    container.style.maxHeight = height + 'px';
})}, 3000);

function getContainerHeight(containerChildren) {
    let height = 0;

    for ( let a = 0; a <= 3; a++ ) {
        height += containerChildren[a].offsetHeight;
    }

    return height;
}

const awardCatContainers=document.queryselectoral（“.award category container”）；
const button=document.querySelector（'.award.button'）；
//设置一个超时
setTimeout（（）=>{awardCatContainers.forEach（（容器）=>{
let awards=container.querySelectorAll（'.award'）；
let height=getContainerHeight（奖励）；
container.style.maxHeight=高度+px'；
})}, 3000);
函数getContainerHeight（containerChildren）{
设高度=0；
对于（设a=0；a您需要循环奖励并应用样式：

awardCatContainers.forEach( (container) => {
    let awards = container.querySelectorAll( '.award' );
    let height = getContainerHeight(awards);

    //container.style.maxHeight = height + 'px';
    for (let award of awards) award.style.maxHeight = height + 'px';
});

我可能误解了您的问题，在这种情况下，您需要提供更多信息

getContainerHeight
也很奇怪，你从0到3。如果我知道你的结构是什么，这将有助于理解你的确切意图。
请在问题中添加你的html代码。应该
a，因为你正在数到0，1，2，3:）计数为3是故意的，因为我希望每个容器的高度等于其子容器的3的总和。@SysixSorry，这里有一个指向我刚刚为附加上下文创建的代码笔的链接@zamadulvahidah谢谢！这似乎已经解决了它：）我很高兴它可以解决这个问题。但不要将此作为最终代码。因为你可以永远不要确定超时时间。如果网络太慢，加载元素可能需要3秒钟以上。查看承诺或回调并实现最终代码。如果在创建元素之前进行AJAX调用以获取数据，请使用AJAX提供的回调来确定AJAX调用是否完成。是的，我很担心ied关于这一点。目前正试图找出如何做到这一点，而不必超时3秒。非常令人沮丧，但感谢你让我意识到我没有发疯！分类，再次感谢！总是一个愉快的计数3是故意的，因为我希望每个容器的高度等于它的3个孩子的总和。它看起来像是w由于页面加载时元素未准备就绪。
const awardCatContainers = document.querySelectorAll( '.award-category-container' );
const button = document.querySelector( '.award .button' );
// set a timeout
setTimeout(() => {awardCatContainers.forEach( (container) => {
    let awards = container.querySelectorAll( '.award' );
    let height = getContainerHeight(awards);

    container.style.maxHeight = height + 'px';
})}, 3000);

function getContainerHeight(containerChildren) {
    let height = 0;

    for ( let a = 0; a <= 3; a++ ) {
        height += containerChildren[a].offsetHeight;
    }

    return height;
}

awardCatContainers.forEach( (container) => {
    let awards = container.querySelectorAll( '.award' );
    let height = getContainerHeight(awards);

    //container.style.maxHeight = height + 'px';
    for (let award of awards) award.style.maxHeight = height + 'px';
});