参考

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。

参考

修改

检查~的支持表，ie7和更新支持后，所以可能没有兼容性问题（谁还支持ie6？！）。

如果您需要使用Javascript，$('#id ~ .test')将比$('#id').nextAll('.test');更快（至少在支持.querySelectorAll()的浏览器中）。

Answer 2

你的评论很接近，但反过来说

$('#hi').nextAll('.test').hide();
// start from #hi then select all next elements that have class test

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

2 个答案:

参考

修改