Question

jquery mouseover问题只在第一个div的第一个li中运行

运行后的结果移动到电器的div就只显示空调

没有mouseover事件时显示的结果

为什么运行结果只在第一个div中的第一个li中运行

$(function(){ $("#super").mouseover(function(){ $("#sub").each(function(){ $(this).css("display","block"); }); }); $("#super").mouseout(function(){ $("#sub").each(function(){ $(this).css("display","none"); }); });})

<div style="float:left "> <s:action name="sp_load" /> <c:forEach items="${sessionScope.supertype}" var="supertype" > <div id="super" align=left> <h3>${supertype.typename}</h3> <s:action name="su_load"> <s:param name="typename">${supertype.typename}</s:param> </s:action> <div align=right> <ul> <c:forEach items="${sessionScope.subtype}" var="subtype" > <li id="sub" style="list-style-type:none ;display:none; "> <a href="" >${subtype.subtypename}</a> </li> </c:forEach> </ul> </div> </div> </c:forEach> </div>
只显示一个li的问题解决了！但是只在第一个div中才存在mouseover事件还没解决





Answer 1

① jquery id 选择器的特性，在使用 id 选择器时，jquery 能够获取的是该 id 元素的第一个，其余的自动忽略……因此，你的效果只会在第一个 #super 运行；

② 由于①，需要将 super 和 sub 改成 class；

③ 代码如下：

$(function(){
    // 原来的写法
    /*$("#super").mouseover(function(){
        $("#sub").each(function(){
            $(this).css("display","block");
        });     
    });
    $("#super").mouseout(function(){
        $("#sub").each(function(){
            $(this).css("display","none");
        });       
    });*/
    
    // 修改后
    $(".super").mouseover(function (){
        $(this).find(".sub").show();
    }).mouseout(function (){
        $(this).find(".sub").hide();
    });
    /* 说明：
     * 利用 find() 方法确保显示的是鼠标触动当前.super内的所有.sub;
     * 可以用 show() 和 hide() 代替 css("display","block");
     * 可以用 hover() 代替 mouseout() 和 mouseover();
     */
    /*
    $(".super").hover(function (){
        $(this).find(".sub").show();
    },function (){
        $(this).find(".sub").hide();
    });
    */
});

Answer 2

super有几个 不止一个的话就不应该用id 多个相同id只选得到第一个 还有从你的代码里看得出 只要放到super上 就把所有的sub显示出来 所以显示的效果是正确的 你的代码需要调整

追问

我改成class了，但是如何修改成移动到第一个div就显示出第一个div里面的li

追答

我内信你了 看下消息加我QQ 发下代码给我看看 这里不好回答 要看代码说问题

Answer 3

有几个错误，不要用id来each，因为id是唯一属性，要用class属性来遍历效果就对了
id="sub"改成class="sub"
同样 id="super"改成class="super"
,而jquery里调用#super改成.super,#sub改成.sub

$("#super").mouseover(function(){

$("#sub").each(function(){
$(this).css("display","block");
});
});
这里你只对#super添加了over事件，并没有遍历所有的.super，要改成下面这样：
$(".super").each(function(index,ele){
里面在在对子对象编练。具体代码很烦，你自己搞定吧。
});
明白我说的意思了吧。

追问

我按照你的说法将id改成class！但是移动到第一个div时其他的li都出现。就好像我第二张图显示的效果。难道我的this出错了？？

追答

我一般不用this，用each的参数，你可以查一下each的语法，他有两个参数一个指向index也就是索引，另一个指向ele也就是元素本身。这里和this无关，但是this的功能很有限，不如直接用参数方便。
另外你说的，那个所有的都出现也是因为你没有对sub进行限制，你需要先在super里面进行遍历，然后在找到的super元素里遍历该元素之下的子元素。可以用children遍历子对象，也可以通过其他方法遍历，但是一定是在引发事件的那个super下去找子对象。你现在的.sub是找到所有的sub而非仅限于super下的sub。

Answer 4

一个页面ID要唯一, $()根据id找节点也只会找第一个 你把id改成class