请教下,在不改变结构情况下,我想点击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();
}