jQuery提取列表唯一值生成复选框仅显示首项问题修复

代码存在3处核心错误，导致仅能渲染1个复选框：

• 对数组的处理逻辑错误：你将已经是数组类型的items额外包裹了一层方括号，写成var list = [items]，此时list变成了长度为1的二维数组，用for...of遍历时只会拿到整个items数组这一个元素，循环仅执行1次
• DOM操作时机错误：提取li文本的遍历逻辑写在了$(document).ready()外部，代码运行时DOM节点可能尚未加载完成，存在取不到列表元素的风险
• HTML拼接错误：生成label标签时多写了一个无对应开标签的</div>闭合标签，会引发DOM结构错乱
• 额外隐患：直接取li文本时未处理首尾空白，若存在换行、缩进空格，会导致内容相同的文本被判定为不同值，去重失效

JavaScript 代码 #

$(document).ready(function() {
    var items = [];
    // DOM加载完成后再遍历列表项
    $('.list li').each(function() {
        // 去除文本首尾的空白字符，避免干扰去重逻辑
        const itemText = $(this).text().trim();
        if ($.inArray(itemText, items) === -1) {
            items.push(itemText);
        }
    });
    // 直接遍历去重后的一维数组，无需额外包裹
    for (const value of items) {
        $('#container')
            .append(`<input type="checkbox" id="${value}" name="interest" value="${value}">`)
            // 移除多余的</div>标签
            .append(`<label for="${value}">${value}</label>`)
            .append('<br>');
    }
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list" style="display:none;">
    <ul>
        <li id="li1" class="popupul" style="text-align: left;">International</li>
        <li id="li10" class="popupul" style="text-align: left;">Science</li>
        <li id="li332" class="popupul" style="text-align: left;">Physics</li>
        <li id="li2" class="popupul" style="text-align: left;">Africa</li>
        <li id="li3" class="popupul" style="text-align: left;">Asia</li>
        <li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
        <li id="li8" class="popupul" style="text-align: left;">North America</li>
        <li id="li9" class="popupul" style="text-align: left;">South America</li>
        <li id="li222" class="popupul" style="text-align: left;">International</li>
        <li id="li110" class="popupul" style="text-align: left;">Science</li>
        <li id="li32" class="popupul" style="text-align: left;">Africa</li>
        <li id="li23" class="popupul" style="text-align: left;">Asia</li>
        <li id="li35" class="popupul" style="text-align: left;">Caribbean</li>
        <li id="li38" class="popupul" style="text-align: left;">North America</li>
        <li id="li19" class="popupul" style="text-align: left;">South America</li>
    </ul>
</div>
<div id="container"></div>
<div></div>

• 所有DOM相关操作全部移入$(document).ready()回调内，确保执行时页面节点已加载完毕
• 删除错误的数组包裹逻辑，直接遍历去重得到的items一维数组
• 移除HTML拼接时多余的</div>标签，保证DOM结构合法
• 新增.trim()处理列表项文本，规避不可见空白导致的去重异常

内容的提问来源于stack exchange，提问作者João Henrique