如何在forEach循环外定义可复用的newItem变量以解决element未定义错误？

咱们先把问题根儿说清楚：你现在的代码一进入then回调就直接定义newItem，但这时候element变量还完全没影儿呢——element是后面两个forEach循环里才会被传入的参数，提前用它肯定会报“未定义”的错，这完全是逻辑顺序搞反了。

你想要的其实是复用创建卡片的逻辑，而不是真的要把newItem这个DOM对象硬塞在循环外面（毕竟每个循环的element数据都不一样，DOM元素也得是独立的，复用同一个DOM节点反而会出现“元素被移来移去”的问题）。

改好的代码如下 #

smartAxios.get("/smartPmo/kanban/" + sessione.profilo.id)
    .then((data) => {
        // 把创建卡片的逻辑封装成工厂函数，传入element就能生成对应的独立DOM元素
        const createNoteItem = (element) => {
            return $('<div class="col-md-12 single-note-item all-category"><div class="card card-body">' +
                        '<span class="side-stick"></span>' +
                        '<h5 class="note-title text-truncate w-75 mb-0" data-noteHeading="'+element.short_description+'">'+element.short_description+'<i class="point fa fa-circle ml-1 font-10"></i></h5>' +
                        '<p class="note-date font-12 text-muted">'+element.shortcode+' - '+element.id+' (TSRTODO - creation date here)</p>' +
                        '<div class="note-content">' +
                            '<p class="note-inner-content text-muted" data-noteContent="'+element.long_description+'">'+element.long_description+'</p>' +
                        '</div>' +
                        '<div class="d-flex align-items-center">' +
                            '<span class="mr-1"><i class="fa fa-star favourite-note"></i></span>' +
                            '<span class="mr-1"><i class="fa fa-trash remove-note"></i></span>' +
                            '<div class="ml-auto">' +
                                    '<span><i class="fa fa-search focus" data-href="'+element.id+'"></i></span>' +
                            '</div>' +
                        '</div>' +
                    '</div></div>');
        };

        // 处理待办状态的项
        data.data.itemsOpen.forEach(element => {
            const newItem = createNoteItem(element);
            newItem.find('.side-stick').addClass('background-'+element.color);
            $('#sortable1').append(newItem);
        });

        // 处理进行中状态的项（这里你原来的代码也append到#sortable1，大概率是笔误，记得改成对应容器比如#sortable2）
        data.data.itemsInProgress.forEach(element => {
            const newItem = createNoteItem(element);
            newItem.find('.side-stick').addClass('background-'+element.color);
            $('#sortable1').append(newItem);
        });
    });

核心改动说明 #

1. 封装创建逻辑为工厂函数：把生成卡片DOM的代码放到createNoteItem函数里，只有当循环拿到有效的element时才调用这个函数，从根源上避免了“提前使用未定义变量”的问题。
2. 保证DOM元素独立性：每次调用createNoteItem都会生成全新的DOM节点，不会出现原代码中“复用同一个节点导致元素被移动而非新增”的问题。
3. 保留代码复用性：创建卡片的核心HTML结构只写一次，两个循环都能复用，符合你想要的“定义一次、使用多次”的需求。

另外提个小细节：你原来的两个forEach都把元素追加到#sortable1，这应该是个笔误，进行中的项建议放到对应的容器比如#sortable2里，记得根据你的看板布局调整哦。

备注：内容来源于stack exchange，提问作者user2399035