如何在jQuery中结合for循环与HTML()方法为指定元素赋值？

你的代码里有几个关键问题导致没达到预期效果，直接改这几处就行：

• jQuery方法名错误：jQuery设置元素内容的方法是小写的html()，不是大写的HTML()，而且不能用赋值方式，要把内容作为参数传入。
• 定时器未正确清除：clearInterval()必须传入定时器ID才能停止计时，不然定时器会一直运行。
• 缺少定时器ID保存：需要把setInterval的返回值存起来，才能在合适时机终止定时器。

修正后的完整代码：

let skill_names = ["HTML", "CSS", "JavaScript", "Jquery", "MySQL"]
let skill_number = [10, 20, 30, 40, 50]

for (let i = 0; i < skill_names.length; i++) {
    let insert_skill = `                <div class="skill">
                    <div class="outer">
                        <div class="inner">
                            <div class="skill_number"></div>
                        </div>
                    </div>
                </div>`
    $(".skill_info_box").append(insert_skill);
}

for (let i = 0; i < skill_names.length; i++) {
    increase_number(i)
}

function increase_number(i) {
    let counter = 0;
    // 保存定时器ID，用于后续清除
    const timer = setInterval(() => {
        if (counter === skill_number[i]) {
            // 传入ID停止定时器
            clearInterval(timer);
        } else {
            counter += 1;
            // 用正确的html()方法设置内容
            $(".skill_number").eq(i).html(counter + "%");
        }
    }, 30)
}

修改说明：

1. 把错误的$(".skill_number").eq(i).HTML() = counter + "%"改成$(".skill_number").eq(i).html(counter + "%")，这是jQuery设置元素内容的标准写法。
2. 新增timer变量存储定时器ID，确保计数器达到目标值后能及时停止计时。
3. 用严格相等===代替==，避免类型隐式转换带来的潜在问题。

修改后，每个skill_number元素会对应显示数组里的数值，并且从0递增到目标值后自动停止。

内容的提问来源于stack exchange，提问作者yoonho-co-kr