本文旨在提供一种通用的 jQuery 方法，用于访问嵌套在多层父级元素下的子级 DIV，并以实现“显示更多/显示更少”功能为例进行演示。通过修改 DOM 遍历方式，使得代码能够适应更复杂的 HTML 结构，从而提高代码的复用性和健壮性。
问题背景与解决方案
在网页开发中，经常会遇到需要控制某个 DIV 元素的显示与隐藏，例如实现“显示更多”功能。通常的做法是，通过 jQuery 选择器找到触发事件的元素（例如，一个链接），然后根据其父元素的层级关系，找到需要操作的 DIV 元素。但是，当 HTML 结构发生变化，例如在目标 DIV 外面增加一层 wrapper，原有的 jQuery 代码可能就会失效。
为了解决这个问题，我们需要一种更通用的方法来访问目标 DIV 元素，而无需依赖于固定的父元素层级关系。本文将介绍如何使用 parentNode 和 querySelector 方法来实现这一目标。
使用 parentNode 和 querySelector
核心思路是：从触发事件的元素开始，向上遍历 DOM 树，直到找到一个合适的父元素（例如，包含所有相关元素的容器），然后在这个父元素下使用 querySelector 方法来查找目标 DIV 元素。
以下是一个具体的示例：
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...
<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>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';
});CSS 代码：
.showContent {
display: block;
}
.hideContent {
display: none;
}代码解释：
- $(".show-more a").on("click", function() { ... });: 这部分代码选择所有 class 为 show-more 的元素下的 <a> 标签，并绑定一个点击事件处理函数。
- let div = this.parentNode.parentNode.querySelector('.content');: 这是核心代码。this 指的是被点击的 <a> 标签。this.parentNode 获取其父元素（即 <div class="show-more">），然后再次使用 parentNode 获取 <div class="show-more"> 的父元素，也就是 <div class="text-container">。最后，使用 querySelector('.content') 在 <div class="text-container"> 元素下查找 class 为 content 的元素。
- let classes = ['showContent', 'hideContent'];: 定义一个包含两个 class 名称的数组，用于切换 DIV 的显示状态。
- if (div.classList.contains(classes[0])) { ... } else { ... }: 判断 DIV 当前是否包含 showContent class。如果包含，则替换为 hideContent；否则，替换为 showContent。 classList.replace 是 JavaScript 中用于替换元素 class 的方法。
- this.textContent = this.textContent == 'Show more' ? 'Show less' : 'Show more';: 根据 DIV 的显示状态，更新链接的文本内容。
替代方案：使用 closest() 和 find()
除了 parentNode 和 querySelector 之外，还可以使用 jQuery 提供的 closest() 和 find() 方法来实现相同的功能。
$(".show-more a").on("click", function() {
var $this = $(this);
var $container = $this.closest(".text-container"); // 向上查找最近的 .text-container
var $content = $container.find(".content"); // 在 .text-container 下查找 .content
var linkText = $this.text().toUpperCase();
if (linkText === "SHOW MORE") {
linkText = "Show less";
$content.switchClass("hideContent", "showContent", 400);
} else {
linkText = "Show more";
$content.switchClass("showContent", "hideContent", 400);
};
$this.text(linkText);
});代码解释：
- $this.closest(".text-container"): 从当前元素（<a> 标签）开始，向上查找最近的 class 为 text-container 的祖先元素。
- $container.find(".content"): 在找到的 text-container 元素下，查找 class 为 content 的子元素。
这种方法更加简洁，也更容易理解。closest() 方法可以确保找到的是正确的容器元素，而 find() 方法则可以在该容器内查找目标元素。
注意事项与总结
- 选择合适的容器元素： 在使用 parentNode 和 querySelector 或 closest() 和 find() 时，需要选择一个合适的容器元素，该容器元素应该包含所有相关的元素，并且具有唯一的标识（例如，一个特定的 class 名称）。
- 错误处理： 在实际应用中，应该添加错误处理机制，以防止找不到目标元素时出现异常。例如，可以检查 querySelector 或 find() 方法的返回值是否为 null 或 undefined。
- 性能优化： 如果需要频繁地访问 DOM 元素，可以考虑将结果缓存起来，以提高性能。
通过使用 parentNode 和 querySelector 或 closest() 和 find() 方法，我们可以编写出更加通用和健壮的 jQuery 代码，从而轻松应对各种复杂的 HTML 结构，实现“显示更多”等功能。这种方法可以提高代码的可维护性和可重用性，减少因 HTML 结构变化而导致的代码失效的风险。
