首页 > jq选择器的问题

jq选择器的问题


请教下,在不改变结构情况下,我想点击class=1时隐藏显示他下面全部(直到下一个class1前停止)的class2,但不知道该用设么选择器。。由于是tr 又不能再外面统一包裹一个div,所以不改变结构怎么操作??

PS:谢各位大神,实际情况稍复杂点,最后这样写解决了


nextUntil

$('.1').nextUntil('.1')

非jQuery党,翻了翻API,试着写了一下,不知道有没有更简单的方法:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style type="text/css">
        ul{
            padding: 0px;
        }
        ul li{
            list-style: none;
            height: 30px;
            line-height: 30px;
            margin: 10px;
        }
        ul li.cls1{
            background-color: #eee;
        }
        ul li.cls2{
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li class="cls1">标题1</li>
        <li class="cls2">1-1</li>
        <li class="cls2">1-2</li>
        <li class="cls1">标题2</li>
        <li class="cls2">2-1</li>
        <li class="cls2">2-2</li>
        <li class="cls1">标题3</li>
        <li class="cls2">3-1</li>
        <li class="cls2">3-2</li>
    </ul>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {
            $("li").click(function() {
                var len = $("li").length;
                var clsIndex = $(".cls1").index($(this));
                var start = $("li").index($(this));
                var end = $("li").index($(".cls1").eq(clsIndex+1));
                end = end>start?end:len;
                
                console.log("start:"+start+";end:"+end);
                
                for(var i=0;i<len;i++){
                    if(i>start && i<end){
                        $("li").eq(i).toggle();
                    }
                }
            });
        }) 
    </script>
</body>
</html>

  $('.1').click(function(){
    $(this).nextUntil('.1').hide();
  });

大概思路是:

- 根据你当前点击的获取父级元素
- 从父级元素获取所有子元素
- 把所有子元素隐藏
- 最后把你点击的显示

(original javascript)


$(this).next()  一个一个选择不行吗?

var node = $(this).next();

while(node.length){
    if(node.attr('class') == '1')
        break;
    node = node.next();
}
【热门文章】
【热门文章】