使用jquery隐藏特定id之后的类

Question

我有这个代码的问题:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div id="hi"></div>
<span>Hello my friend</span>
<font>Hola!</font>
<div id="break">
   <div></div>
</div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

我想要的是在id为"hi"的div之后用class"test"隐藏所有div.我能怎么做？

谢谢.

Answer 1

这可以通过CSS完成:

#id ~ .text{
    display:none;
}

但这是一个CSS3选择器.如果你想要旧浏览器支持的东西,你可以使用这个jQuery:

$('#hi').nextAll('.test').hide();

请注意,纯CSS始终是JS的首选方法(如果有选择).因此,如果您的代码仅用于隐藏元素,请尝试避免使用JS.

参考

• 一般兄弟选择器(〜)
• .nextAll()
• .hide()

编辑

检查支持表后~,ie7和更新支持它,所以可能没有兼容性问题(谁还支持ie6？!).

如果你需要使用Javascript,$('#id ~ .test')将比$('#id').nextAll('.test');(.querySelectorAll()至少支持的浏览器)更快.