未在使用jQuery的浏览器中呈现的HTML追加了for循环

Question

尝试使用带有jQuery追加的for循环动态更新琐事游戏中的选择，但浏览器没有呈现choiceText变量。

    for (let i = 0; i < allChoices[0].length; i++) {
        let allChoicesFin = allChoices[0];

        const choiceContainer = $('.choice-container');

        let choiceText =
            '<span class="px-2 text-start">' + allChoicesFin[i] + '</span>';

        choiceContainer[i].append(`${choiceText}`);
    }

picture of the trivia game where the HTML is not rendering

Answer 1

这个问题是因为您正在按索引访问jQuery对象。这将返回一个Element对象，而不是jQuery对象，因此您使用的是原生append()方法，而不是jQuery方法。因此，字符串被注入为文本内容，而不是DOM字符串。

要解决此问题，请将choiceContainer[i]更改为choiceContainer.eq(i)

​

let allChoices = [['foo', 'bar']];
let allChoicesFin = ['lorem', 'ipsum'];
const $choiceContainer = $('.choice-container');

for (let i = 0; i < allChoices[0].length; i++) {
  $choiceContainer.eq(i).append(`<span class="px-2 text-start">${allChoices[0][i]}</span>`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choice-container"></div>
<div class="choice-container"></div>

​

注意，我对逻辑做了一些调整，比如在循环外定义$choiceContainer，删除一个不必要的模板文字，以及添加一个必要的模板文字。