本文将介绍如何使用 jQuery 选择器来控制 HTML 元素的可视性，特别是隐藏或显示除第一个子元素之外的所有同级元素。通过使用 :not(:first) 选择器，我们可以避免不必要的循环，从而提高代码性能和可读性。
使用 jQuery 选择器 :not(:first)
在 Web 开发中，经常会遇到需要对一组元素进行操作，但排除其中的某一个或几个元素的情况。jQuery 提供了强大的选择器，可以轻松实现这种需求。例如，我们需要隐藏 <div> 容器中除第一个 div.row 元素之外的所有 div.row 元素。
HTML 结构如下：
<div class="container">
<div class="row m-0 be_product_grid_image">
<div class="col_classes">
<img src="img1.png" />
</div>
<div class="row m-0 be_product_grid_image">
<div class="col_classes">
<img src="img2.png" />
</div>
<div class="row m-0 be_product_grid_image">
<div class="col_classes">
<img src="img3.png" />
</div>
<div class="row m-0 be_product_grid_image">
<div class="col_classes">
<img src="img4.png" />
</div>
<div class="row m-0 be_product_grid_image">
<div class="col_classes">
<img src="img5.png" />
</div>
</div>要实现点击 "显示全部" 按钮时显示除第一个图片外的所有图片，点击 "显示较少" 按钮时隐藏除第一个图片外的所有图片，可以使用以下 jQuery 代码：
// 选择除第一个 .be_product_grid_image 之外的所有元素
var images = $('.be_product_grid_image:not(:first)');
// "显示全部" 按钮的点击事件
$(document).on('click', '.show_all_button', function() {
images.show(); // 显示所有选定的图片
});
// "显示较少" 按钮的点击事件
$(document).on('click', '.show_less_button', function() {
images.hide(); // 隐藏所有选定的图片
});代码解释：
- $('.be_product_grid_image:not(:first)'): 这个选择器首先选择所有 class 为 be_product_grid_image 的元素，然后使用 :not(:first) 排除第一个元素。
- $(document).on('click', '.show_all_button', function() { ... });: 这行代码为 class 为 show_all_button 的元素绑定一个点击事件。当点击该元素时，执行函数内的代码。
- images.show();: 这行代码显示所有之前选定的 images 元素。
- $(document).on('click', '.show_less_button', function() { ... });: 这行代码为 class 为 show_less_button 的元素绑定一个点击事件。
- images.hide();: 这行代码隐藏所有之前选定的 images 元素。
注意事项：
- 请确保将 .show_all_button 和 .show_less_button 替换为您实际按钮的 class 或 ID。
- 如果需要在页面加载时默认隐藏除第一个元素之外的所有元素，可以在 JavaScript 代码中添加 images.hide(); 在定义 images 变量之后。
总结
使用 jQuery 的 :not(:first) 选择器可以有效地避免循环，简化代码，提高性能。这种方法适用于各种需要排除第一个子元素的情况，例如动态加载内容、列表过滤等。通过理解和掌握这种技术，可以编写更简洁、高效的 JavaScript 代码。
