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

//增加搜索列表
    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方法完成这样的操作

 

posted @ 2017-12-26 21:31  博雅源  阅读(907)  评论(0编辑  收藏  举报