Jquery里面怎么多了一个div


<ul>
        <li class="tabin">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div>
        内容区1</div>
    <div>
        内容区2</div>
    <div>
        内容区3</div>Jquery代码如下：
$(function(){
            $("li").each(function(index){
            
            $(this).mouseover(function(){
            // 将当前区域的li隐藏
            alert("x");
            $("div.contentin").removeClass("contentin");
            alert("y");
            // 将当前li所对应的区域显示出来
            $("div").eq(index).addClass("contentin");//注意就这个地方，我这里当index等于0的时候添加就不行，必须要index等于1的时候添加才可以，我的页面明明就3个div，但是在火狐中看下面出现第4个div？ 为什么呢？火狐中看到的如下：<div id="livemargins_control" style="position: absolute; display: none; z-index: 9999;"><img width="77" height="5" style="position: absolute; left: -77px; top: -5px;" src="chrome://livemargins/skin/monitor-background-horizontal.png"> <img style="position: absolute; left: 0pt; top: -5px;" src="chrome://livemargins/skin/monitor-background-vertical.png"> <img style="position: absolute; left: 1px; top: 0pt; opacity: 0.5; cursor: pointer;" onmouseout="this.style.opacity=0.5" onmouseover="this.style.opacity=1" src="chrome://livemargins/skin/monitor-play-button.png" id="monitor-play-button"></div>，多了个他。
            alert("z");
                            })
            })
})总结问题就是：我HTML编辑器中总共就3个DIV，怎么火狐运行后会出现第4个DIV？ 还有我的3个div在Jquery中是从0开始索引？还是从1开始索引？

解决方案 »

  1.   

    那我的$("div").length为什么等于4？
      

  2.   

    可能是你火狐装了什么插件导致的
    比如firebug就会多一个Script标签
      

  3.   

    环境中的页面代码<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="div.aspx.cs" Inherits="sqlTity.div" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
                $("li").each(function(index){
                
                $(this).mouseover(function(){
                $("div.contentin").removeClass("contentin").addClass("nones");
                $("div").eq(parseInt(index)+1).removeClass("nones").addClass("contentin");
                                });
                })
    })    </script>
        <style type="text/css">
        .contentin{ display:block;}
        .nones{ display:none;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ul>
            <li class="tabin">标签1</li>
            <li>标签2</li>
            <li>标签3</li>
        </ul>
        <div class="nones">
            内容区1</div>
        <div class="nones">
            内容区2</div>
        <div class="nones">
            内容区3</div>    </form>
    </body>
    </html>
    运行后火狐中的html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>
    无标题页
    </title>
        <script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
                $("li").each(function(index){
                
                $(this).mouseover(function(){
                $("div.contentin").removeClass("contentin").addClass("nones");
                $("div").eq(parseInt(index)+1).removeClass("nones").addClass("contentin");
                                });
                })
    })    </script>
        <style type="text/css">
        .contentin{ display:block;}
        .nones{ display:none;}
        </style>
    </head><body>
        <form name="form1" method="post" action="div.aspx" id="form1">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRUWCfosjjMDI2OEjj/9g0huIbm5w==" />
    </div>        <ul>
            <li class="tabin">标签1</li>
            <li>标签2</li>
            <li>标签3</li>    </ul>
        <div class="nones">
            内容区1</div>
        <div class="nones">
            内容区2</div>
        <div class="nones">
            内容区3</div>    </form>
    </body>
    </html>
    这个是aspx页面生成的代码。楼主换一种方法我在你的代码上改的:<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script src="App_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
                $("li").each(function(index){
                
                $(this).mouseover(function(){
                $("div.contentin").removeClass("contentin").addClass("nones");
                $("div[name='div1']").eq(index).removeClass("nones").addClass("contentin");
                                });
                })
    })    </script>
        <style type="text/css">
        .contentin{ display:block;}
        .nones{ display:none;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ul>
            <li class="tabin">标签1</li>
            <li>标签2</li>
            <li>标签3</li>
        </ul>
        <div  name="div1" class="nones">
            内容区1</div>
        <div name="div1" class="nones">
            内容区2</div>
        <div name="div1" class="nones">
            内容区3</div>    </form>
    </body>
    </html>