问题描述
- 求高受！$.each嵌套$.each出现这样的问题，并且js无效果
-
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; border: 0; } .nav{ width: 100px;height: 50px; font-family: "微软雅黑"; font-size: 12px; background: #FAFAFA; } .navLeft{ width: 100px; height: 40px; float: left; position: relative; background-color: #000000; } .navLeft p{ height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; font-size: 14px; } .fenlei{ width: 100px; height: auto; background: #FFFFFF; top: 40; left: 0; border: 1PX solid #EEEEEE; } .fenlei ul{ overflow: hidden; } .fenlei ul li{ overflow: hidden; height: 50px; border-bottom: 1px solid #EEEEEE; } .fenleiLeft { overflow: hidden; position: absolute; } .fenleiLeft>dt{ width: 40px; height: 64px; float: left; font-size: 14px; font-weight: bold; padding-right: 0; padding-bottom: 0; padding-left: 35px; padding-top: 15px; } .fenleiright{ width: 0px; height: auto; border: 1px solid #EEEEEE; border-left: 0; position: relative; top: -100px; left: 100px; overflow: hidden; background-color: #FFFFFF; } .flright{ height: 40px; overflow: hidden; padding-right: 0; padding-bottom: 0; padding-left: 30px; padding-top: 20px; } .flright dt{ height: 24px; font-size: 14px; font-weight: bold; padding-top: 15px; } </style> <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //获取数据列表 function MyAutoRun(){ $.ajax({ url: 'selectProductTypeWeb.action', type: 'post', data:{'fatherId':0}, dataType: 'json', error: function(){ }, success: function(backValue){ $.each(backValue.dataList,function(idx,item){ /* if(idx==0){ return true;//同countinue，返回false同break } */ $("#ul_list").append('<li><dl class="fenleiLeft"><dt>'+item.typeName+'</dt><div class="fenleiright" id="id'+item.typeId+'"></div></dl></li>'); alert("1"); id="#id"+item.typeId; fatherId = item.typeId; $.ajax({ url: "selectProductTypeWeb.action", type: "post", data:{"fatherId":fatherId}, dataType: "json", error: function(){ }, success: function(backValue){ $.each(backValue.dataList,function(idx,item){ $(id).append('<dl class="flright"><dt>'+item.typeName+'</dt></dl>'); alert("2"); }); } }); //alert("3"); //$("#ul_list").append('</div></dl></li>'); }); } }); } window.onload=MyAutoRun(); $(function(){ $('.fenlei ul li').mouseenter(function(){ $(this).stop().animate({'height':'50px'},300).siblings().stop().animate({'height':'50px'},300); $(this).siblings().css('background','#F5F5F5'); }).mouseleave(function(){ $('.fenlei ul li').stop().animate({'height':'50px'},300); $(this).siblings().css('background','#ffffff'); }); }); $(function(){ $("dl").find("div").parent().mouseenter(function(){ $(this).children('.fenleiright').fadeTo(0,0.5).stop().animate({'width':'200px'},300); }); $("dl").find("div").parent().mouseleave(function(){ $(this).children('.fenleiright').stop().animate({'width':'0px'},300); }); }); </script> </head> <body> <div class="nav"> <div class="navLeft"> <p>商品类目</p> <div class="fenlei"> <ul id="ul_list"> </ul> </div> </div> </div> </body> </html>
出现在循环结果是这样的 内循环永远在所有外循环结束后执行 ，并且JS无效是怎么回事？ 求高受！！
解决方案
js循环。for，each
for each问题
LeetCode题解：Populating Next Right Pointers in Each Node I and II
解决方案二：
建议你不要这样嵌套ajax查询，没有必要，而且也很低效率，你只需要一次返回所有父子数据，然后在success中进行处理即可。
解决方案三：
这个应该是由于异步造成的吧 在$.ajax中加入async:false这样应该不会产生之前的问题了，只是效率应该不是很高
解决方案四：
哈哈，你犯了一个本质性错误，ajax是异步的，你嵌套调用，没控制好，返回顺序是乱的
解决方案五：
ajax都被你玩坏了
时间： 2024-09-19 09:15:17