本文旨在解决在使用 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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<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';
});
同时，我们需要定义 .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 指向被点击的 标签。 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() 方法来提高代码的可读性。
总结
本教程介绍了如何使用 jQuery 查找嵌套的子元素，并实现 "显示更多" 功能。 通过灵活运用 DOM 遍历的方法，我们可以轻松地操作复杂的 HTML 结构，实现各种动态效果。 在实际开发中，应根据具体的 HTML 结构选择最合适的定位元素的方法，并注意代码的可读性和可维护性。
