jquery 选择器 隐藏指定范围的元素.
html代码.现在的需求是,只能点击id属性值包含first的tr元素..点击之后,一直隐藏到下一个id属性包含first的tr元素之前的那一个元素..具体是:比如我给第...
html代码.
现在的需求是,只能点击 id 属性值 包含 first的tr元素..
点击之后,一直隐藏到下一个 id 属性包含 first的tr元素之前的那一个元素..
具体是: 比如我给 第一个 id = first_1 的 tr 绑定一个 click事件,点击之后,一直隐藏到 id = tr_10 的tr.
id = first_1的tr本身不隐藏..
不过在jquery中,我只发现了nextAll 和 next 函数,都不能满足现在的需求.
求高手指点...
有张我自己的图可能看的清楚点。 展开
现在的需求是,只能点击 id 属性值 包含 first的tr元素..
点击之后,一直隐藏到下一个 id 属性包含 first的tr元素之前的那一个元素..
具体是: 比如我给 第一个 id = first_1 的 tr 绑定一个 click事件,点击之后,一直隐藏到 id = tr_10 的tr.
id = first_1的tr本身不隐藏..
不过在jquery中,我只发现了nextAll 和 next 函数,都不能满足现在的需求.
求高手指点...
有张我自己的图可能看的清楚点。 展开
展开全部
$("tr[id^=first]").click(function(){
var $this = $(this);
var x = $("");
var y = $this;
while(1){
var next = y.next();
if(next.length==0){
break;
}
if(next.is("tr[id^=tr]")){
x = x.add(next)
}
y = next;
}
x.hide();
});
我没有测试。但是程序是没有问题的。程序中有不理解的再找我。
var $this = $(this);
var x = $("");
var y = $this;
while(1){
var next = y.next();
if(next.length==0){
break;
}
if(next.is("tr[id^=tr]")){
x = x.add(next)
}
y = next;
}
x.hide();
});
我没有测试。但是程序是没有问题的。程序中有不理解的再找我。
追问
代码,我是直接复制使用的.
点击了没有效果..
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$this.nextUntil("tr[id^=first]").toggle();//直到下一个有first开头id元素
追问
要一直到那个id 属性值为 first 之前的那个元素..
不能到 id 值 包含first的元素.
====================================
刚又试了一下.你的这个方法最简洁最有效..
能不能加一点动画效果呢?
toggle() 感觉太快了.
追答
可以加时间控制，也可以加动画，你要什么效果？
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script src="jquery1.8/jquery-1.8.0.min.js"></script>
<script>
jQuery(function ($) {
$("tr[id^='first']").click(function () {
var me = $(this);
var temp = me.next();
while (!/first.*/g.test(temp.prop('id'))) {
me.siblings("tr[id="+temp.prop('id')+"]").css('display','none');
temp = temp.next();
}
});
});
</script>
</head>
<body>
<table>
<tr id="first_1"><td>1</td></tr>
<tr id="tr_2"><td>2</td></tr>
<tr id="tr_3"><td>3</td></tr>
<tr id="tr_4"><td>4</td></tr>
<tr id="first_5"><td>5</td></tr>
<tr id="tr_6"><td>6</td></tr>
<tr id="tr_7"><td>7</td></tr>
<tr id="tr_8"><td>8</td></tr>
<tr id="tr_9"><td>9</td></tr>
<tr id="first_10"><td>11</td></tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
