使用 jQuery 优雅地显示/隐藏除第一个元素外的所有元素

本文将介绍如何使用 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 代码：

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

// 选择除第一个 .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(); // 隐藏所有选定的图片
});

代码解释：

1. $('.be_product_grid_image:not(:first)'): 这个选择器首先选择所有 class 为 be_product_grid_image 的元素，然后使用 :not(:first) 排除第一个元素。
2. $(document).on('click', '.show_all_button', function() { ... });: 这行代码为 class 为 show_all_button 的元素绑定一个点击事件。当点击该元素时，执行函数内的代码。
3. images.show();: 这行代码显示所有之前选定的 images 元素。
4. $(document).on('click', '.show_less_button', function() { ... });: 这行代码为 class 为 show_less_button 的元素绑定一个点击事件。
5. images.hide();: 这行代码隐藏所有之前选定的 images 元素。

注意事项：

• 请确保将 .show_all_button 和 .show_less_button 替换为您实际按钮的 class 或 ID。
• 如果需要在页面加载时默认隐藏除第一个元素之外的所有元素，可以在 JavaScript 代码中添加 images.hide(); 在定义 images 变量之后。

总结

使用 jQuery 的 :not(:first) 选择器可以有效地避免循环，简化代码，提高性能。这种方法适用于各种需要排除第一个子元素的情况，例如动态加载内容、列表过滤等。通过理解和掌握这种技术，可以编写更简洁、高效的 JavaScript 代码。

以上就是使用 jQuery 优雅地显示/隐藏除第一个元素外的所有元素的详细内容，更多请关注php中文网其它相关文章！