jquery 怎么获取2个元素之间的同胞元素。

jquery

解决方案 »

  1.   

    $("h2").click(function(){
    $(this).next("li").hide();
    });
      

  2.   

    这个好像只是下一个。h2之间的li不止一个。
      

  3.   

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0-beta1.js"></script>
    </head><body>
     <ul>
         <li>111</li>
         <h2>h1h1</h2>
         <li>222</li>
         <h2>h2h2</h2>
         <li>333</li>
         <h2>h3h3</h2>
     </ul> <script type="text/javascript">    $(function(){
            $("h2").each(function(){
                $(this).click(function(){
                    $(this).hide();
                    var li = $(this).nextUntil('h2');
                    console.log(li)
                })
            })
        })
    </script>
    </body>
    </html>
      

  4.   

    返回的是数组？console.log(li)又是什么意思啊？
      

  5.   

    吧你的问题描述仔细点 并且页面代码贴出
    我代码是动态的，我写一个差不多的把<ul>
                            <h1>表示年份</h1>
                            <h2>表示月份</h2>
                            <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
                            <h2>表示月份</h2>
                            <li>内容</li>
                            <h2>表示月份</h2>
                            <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
                        </ul>当点击h1的时候，把li和h2隐藏或者显示，点击h2就隐藏或者显示li这个意思。
      

  6.   

    $(function(){
               $("#h2").each(function(){
                    $(this).click(function(){
                        var h2 = $(this).nextUntil('h2')
                        //console.log(h2.nextUntil('h2').hide())
                        h2.toggle(
                            function(){
                                h2.hide();
                            },
                            function(){
                               // h2.show();
                            }
                        )
                        
                    })
               })
            })
      

  7.   

    第二行改成 $("h2").each(function(){
      

  8.   

    你这是个菜单吧 设计的有问题<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(function(){$("h1").click(function(){$(this).next().slideToggle();});
    })
    </script></head><body >
    <ul>
    <li>
                            <h1>表示年份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>
    <li>
                            <h1>表示月份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>
    <li>
                            <h1>表示月份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>                    </ul>
    </body>
    </html>
      

  9.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(function(){$("h1").click(function(){$(this).next().slideToggle();});
    })
    </script>
    <style>ul, li {
    /*清除ul和li上默认的小圆点*/
    list-style: none;
    }
    ul {
    /*清除子菜单的缩进值*/
    padding: 0;
    margin: 0;
    }
    </style>
    </head><body >
    <ul>
    <li>
                            <h1>表示年份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>
    <li>
                            <h1>表示月份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>
    <li>
                            <h1>表示月份</h1>
                            <ul>
    <li>内容</li>
                            <li>内容</li>
                            <li>内容</li>
    </ul>
    </li>                    </ul>
    </body>
    </html>
      

  10.   


    中文乱码  <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
            </script>
    <script>
    $(function(){$("h1").click(function(){$(this).next().slideToggle();});
    })
    </script>
    <style>ul, li {
    /*清除ul和li上默认的小圆点*/
    list-style: none;
    }
    ul {
    /*清除子菜单的缩进值*/
    padding: 0;
    margin: 0;
    }
    </style>
    </head><body >
    <ul><!--最外层-->
    <li><!--第一个子项-->
                            <h1>一级菜单1</h1>
                            <ul>
    <li>
      <h1>二级菜单1</h1>
      <ul>
    <li>
     <h1>三级菜单1</h1>
    <ul>
    <li>四级菜单1</li>
    <li>四级菜单2</li>
    <li>四级菜单3</li>
    </ul>
    </li>
    <li>内容</li>
     <li>内容</li>
      </ul>
    </li>
    <li>
     <h1>二级菜单2</h1>
     <ul>
    <li>内容</li>
     <li>内容</li>
      <li>内容</li>
    </ul>
    </li>
    </ul>
    </li> <li><!--第二个子项-->
                            <h1>一级菜单2</h1>
                            <ul>
    <li>
      <h1>二级菜单1</h1>
      <ul>
    <li>内容</li>
    <li>内容</li>
     <li>内容</li>
      </ul>
    </li>
    <li>
     <h1>二级菜单2</h1>
     <ul>
    <li>内容</li>
     <li>内容</li>
      <li>内容</li>
    </ul>
    </li>
    </ul>
    </li>
                        </ul> 
    </body>
    </html>