开发者社区> 问答> 正文

求高受!$.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>

screenshot
出现在循环结果是这样的 内循环永远在所有外循环结束后执行 ,并且JS无效是怎么回事? 求高受!!

展开
收起
杨冬芳 2016-07-05 16:31:53 2669 0
1 条回答
写回答
取消 提交回答
  • IT从业

    建议你不要这样嵌套ajax查询,没有必要,而且也很低效率,你只需要一次返回所有父子数据,然后在success中进行处理即可。

    js循环。for,each
    for each问题
    LeetCode题解:Populating Next Right Pointers in Each Node I and II

    2019-07-17 19:51:36
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载