HTML 不在瀏覽器中使用 jQuery append 與 for 循環呈現

Question

嘗試使用帶有 jQuery append 的 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 object。 這將返回元素 object，而不是 jQuery object，因此您使用的是本機append()方法，而不是 ZF590B48FDA2C3077BDDZ3。 因此，字符串作為文本內容注入，而不是 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 ，刪除一個不必要的模板文字，並添加一個必要的模板文字。