HTML不能在浏览器中使用jQuery呈现

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}`);
}

HTML未渲染的益智游戏图片

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，删除一个不必要的模板字面量，并添加一个必要的。