使用 jquery 在特定 ID 后隐藏 class

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>

我想要的是在 div 和 ID "hi" 之后隐藏所有 div 和 class "test"。我该怎么办？

谢谢。

Answer 1

你的评论很接近，但恰恰相反

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

Answer 2

这可以通过 CSS 来完成：

#id ~ .text{
    display:none;
}

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

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

请注意，纯 CSS 始终是优于 JS 的首选方法（如果有选择的话）。因此，如果您的代码只是用于隐藏元素，请尽量避免使用 JS。

参考

编辑

查看了~的支持table，ie7及以后的版本都支持，所以应该没有兼容性问题（谁还支持ie6？！）。

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

使用 jquery 在特定 ID 后隐藏 class

Hide a class after a specific id with jquery

html

jquery

class

参考

编辑