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