Jquery循环重复创建相同的对象

Posted 2023-05-09

【中文标题】Jquery循环重复创建相同的对象

【英文标题】：Jquery loop creating same objects repeatedly

【发布时间】：2021-10-24 17:03:44

【问题描述】：

我有一个循环来填充 select2 的选项。如果我在我的 url 中选择了参数，我会从后端获取数据并在加载页面时自动填充它。所以我为它创建了 2 个循环。但它的生成选项多次。它创建的选项（DOM）与我的数组长度相同，我从 url 中的参数创建了一个数组。感谢您的帮助。

var myArr = urlProjects.split(",");
for (var i = 0; i < data.data.length; i++) 
    myArr.forEach(e => 
        if (parseInt(e) === data.data[i].id) 
            var option = new Option(data.data[i].name, data.data[i].id, false, true);
            element.select2().append(option);
            projectsArr.push(data.data[i].id);
         else 
            var option = new Option(data.data[i].name, data.data[i].id, false, false);
            element.select2().append(option);
        
    )


urlProjects (example) = 12877,12618,10925

data.data (array of objects- example object) = 
    "id": 12573,
    "name": "TEST",
    "clientID": 1119,
    "rsid": "23bdb244-c92b-42d6-bc58-3282edf27d08",
    "clientName": "test",
    "clients": 
        "client_id": 1119,
        "name": "test",
        "opClientName": "[test]"
    

【问题讨论】：

urlProjects 和 data.data（示例数据）中有什么？

我更新了帖子

您检查过您的代码执行的频率吗？也许您应该在代码之前删除所有选项，以确保您永远不会有重复条目

您当然还有一些其他相关代码，并调用您在某个侦听器中提供的这段代码。 element.select2() 是什么？一些图书馆的使用？ projectsArr 是什么？

这是你在 foreach 循环中的 else 语句。如果您在 data 和 myArr 之间没有匹配，则无论如何都会放置一个元素。 myArr 正在循环遍历每个数据元素，因此您将拥有 data.length * myArr.length 个元素

【参考方案1】：

问题是你总是附加选项，但你应该重新填充数组。

所以，试着调整你的代码如下：

var myArr = urlProjects.split(",");

element.select2() = element.select2(); // Don't have a clue what element.select2() does, from code it looks like it returns an array - so you have to adjust this part. Idea is to empty the array of your option elements.
projectsArr = []; // More-less same here.

// And then - actually, re-fill your arrays again.
for (var i = 0; i < data.data.length; i++) 
    myArr.forEach(e => 
        if (parseInt(e) === data.data[i].id) 
            var option = new Option(data.data[i].name, data.data[i].id, false, true);
            element.select2().append(option);
            projectsArr.push(data.data[i].id);
         else 
            var option = new Option(data.data[i].name, data.data[i].id, false, false);
            element.select2().append(option);
        
    )

有一些更优化的方法 - 检查您的数组是否已经包含一些元素，然后只推送新元素和/或更新现有元素。