for双重循环中的结构分离(语法结构问题)

本文探讨了在JavaScript中使用双循环更新列表时遇到的问题及解决办法。通过分离业务逻辑,确保外部循环负责检查列表项是否存在,内部循环则用于比对已存在的列表项,避免了重复添加相同列表项的问题。
//增加搜索列表
    function addSearchList(){
        $.get("/mall/h5_get_search_list.html","",function(d){
//            alert(d);
            var data=eval('('+d+')');
            var li;
//            alert($mallDel.length);
//            alert(data.malls.length);
            var content='';
            for(var i=0;i<data.malls.length;i++){
                var isExist=true;
                for(var j=0;j<$mallDel.length;j++){
                    li = data.malls[i];
                    if(data.malls[i].mid==$mallDel.eq(j).attr('data-mid')){
                        isExist=false;
                        break;
                    }
                }

                if(isExist){
                    content+="<div class='m-i flex' data-mid='"+li['mid']+"'><i class='fxicon icon-add'>&#xe6b8;</i><span>"+li['name']+"</span></div>";
                    $mallAddedList.html(content);
                }

            }

        });

    }

先上代码

我要做的是一个,如果顶部的区域有已知的搜索列表(根据data-mid属性标识),那么底部就不要再显示同样的列表

刚开始思路有,是双循环,如果在内循环中直接进行了内容插入

这样会导致执行次数变多,有多个重复的列表

这里就是双循环的陷阱,无论是怎样的语法结构,只要在内循环中完成内容的处理,那么就是wrong

所以这里,将业务的逻辑分离在外循环和内循环中是最为可靠的处理方式

外循环中声明了一个标识,isExist布尔变量为true

内循环中进行了一个data-mid属性值是否相同的判断,根据底部区域和顶部的区域的列表

如果相同,则isExist为false,添加内容的代码在外循环中,因此当data-mid属性值相同时,isExist为false,底部区域不会添加该标签

当然以上代码是以底部区域为主的,也即是底部区域的列表项肯定包含顶部区域,底部区域肯定大于顶部区域的列表项

所以底部区域的循环在外层

content变量要赋一个初始值,='',不然会显示undefined

这里不能用jquery的append,不然会插入多个相同的内容,所以这里用字符串连接+jquery的html方法完成这样的操作

 

转载于:https://www.cnblogs.com/wgphp/p/8120112.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值