使用 jQuery 查找嵌套子元素并实现“显示更多”功能-小浪学习网

使用 jQuery 查找嵌套子元素并实现“显示更多”功能

本文旨在解决在使用 jquery 实现“显示更多”功能时，如何准确地定位到嵌套在多层 html 结构中的目标子元素。我们将探讨如何通过 dom 遍历，结合 parentNode 和 querySelector 等方法，有效地找到并操作目标元素，从而实现内容的展开和收起。本文提供详细的代码示例和步骤说明，帮助开发者理解和应用这些技巧。

在 Web 开发中，经常会遇到需要动态显示或隐藏部分内容的情况。 “显示更多” 功能就是一个常见的例子。本教程将重点介绍如何使用 jQuery 来实现这一功能，并解决在 HTML 结构复杂，目标内容嵌套较深时，如何准确地找到需要操作的子元素。

定位嵌套子元素的策略

当目标元素不是直接的兄弟节点，而是嵌套在更深层的 DOM 结构中时，直接使用 prev() 或 next() 方法可能无法奏效。这时，我们需要借助 DOM 遍历的方法，从触发事件的元素开始，向上或向下查找，直到找到目标元素。

常用的方法包括：

parentNode: 用于获取当前节点的父节点。可以多次使用 parentNode 来向上遍历 DOM 树。
closest(): 从当前元素开始，向上查找符合选择器的第一个祖先元素。
find(): 在当前元素的后代元素中查找符合选择器的元素。
querySelector(): 使用 css 选择器在指定的元素范围内查找第一个匹配的元素。这是一种原生的 JavaScript 方法，也可以与 jQuery 对象结合使用。

示例：使用 parentNode 和 querySelector 实现“显示更多”

假设我们有以下 HTML 结构：

<div class="text-container">   <h1>Title goes here</h1>   <h2>Subtitle</h2>   <div class="wrapper">     <div class="content hideContent">       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.       At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.       <p>Some more text</p>       <ul>         <li>Some more text</li>         <li>Some more text</li>         <li>Some more text</li>       </ul>     </div>   </div>   <div class="show-more">     <a href="#">Show more</a>   </div> </div>

我们的目标是点击 “Show more” 链接时，切换 .content 元素的显示状态。

以下是使用 jQuery 实现此功能的代码：

$(".show-more a").on("click", function() {   let div = this.parentNode.parentNode.querySelector('.content');   let classes = ['showContent', 'hideContent'];    if (div.classList.contains(classes[0])) {     div.classList.replace(classes[0], classes[1]);   } else {     div.classList.replace(classes[1], classes[0]);   }    this.textContent = this.textContent == 'Show more' ? 'Show less' : 'Show more'; });

这段代码首先找到点击的 <a> 元素，然后使用 parentNode.parentNode 向上遍历两层，到达 .text-container 元素。接着，使用 querySelector(‘.content’) 在 .text-container 元素内部查找 .content 元素。最后，根据 .content 元素当前的 class，切换其显示状态，并更新链接的文本。

同时，我们需要定义 .showContent 和 .hideContent 的 CSS 样式：

.showContent {   display: block; }  .hideContent {   display: none; }

代码解释：

$(“.show-more a”).on(“click”, function() { … });: 为所有 class 为 show-more 的元素下的 a 标签绑定点击事件。
let div = this.parentNode.parentNode.querySelector(‘.content’);: 获取 .content 元素。 this 指向被点击的 <a> 标签。 this.parentNode 获取到 .show-more 元素。 this.parentNode.parentNode 获取到 .text-container 元素。 querySelector(‘.content’) 在 .text-container 元素内查找 class 为 content 的元素。
let classes = [‘showContent’, ‘hideContent’];: 定义一个包含 showContent 和 hideContent 的数组，方便后续切换 class。
if (div.classList.contains(classes[0])) { … } else { … }: 检查 .content 元素是否包含 showContent class。如果包含，则替换为 hideContent，否则替换为 showContent。
this.textContent = this.textContent == ‘Show more’ ? ‘Show less’ : ‘Show more’;: 根据链接的当前文本，切换为 “Show less” 或 “Show more”。

注意事项

确保 jQuery 库已正确引入。
理解 DOM 结构是准确找到目标元素的关键。可以使用浏览器的开发者工具来检查 DOM 树。
querySelector() 是原生的 JavaScript 方法，性能通常比 jQuery 的选择器更好。在不需要使用 jQuery 的其他功能时，可以考虑使用 querySelector()。
在复杂的 HTML 结构中，过度使用 parentNode 可能会导致代码难以维护。可以考虑使用 closest() 或 find() 方法来提高代码的可读性。