本文介绍了在使用 jQuery 实现“显示更多”功能时，如何有效地定位嵌套在多层 DOM 结构中的目标子元素。重点讲解了当目标元素被包裹在额外的父级容器中时，如何通过 DOM 遍历方法（如 parentNode 和 querySelector）或者 closest()方法来准确地找到需要操作的元素，并提供代码示例和注意事项，帮助开发者轻松应对复杂的 DOM 结构。
在 Web 开发中，经常会遇到需要通过 JavaScript（特别是 jQuery）来操作 DOM 元素的情况。当 DOM 结构比较简单时，直接使用选择器可以很容易地找到目标元素。但当 DOM 结构变得复杂，元素嵌套层级较深时，如何准确地定位目标元素就成了一个问题。本文将以一个“显示更多”功能的实现为例，详细讲解如何使用 jQuery 定位嵌套的子元素。
问题描述
假设我们有如下 HTML 结构，需要实现点击“Show more”链接，展开或收起内容区域的功能：
其中，.content 元素初始状态是隐藏的（hideContent 类），点击 .show-more a 链接后，需要切换 .content 元素的 hideContent 和 showContent 类，并同时改变链接的文本。
解决方案
传统的 jQuery 方法，如 $(this).parent().prev(".content")，在 DOM 结构发生变化（例如，添加了 .wrapper 元素）后，可能无法正确找到目标元素。为了解决这个问题，我们可以使用以下方法：
1. 使用 parentNode 和 querySelector
这种方法通过 parentNode 向上遍历 DOM 树，找到共同的父元素，然后使用 querySelector 在父元素下查找目标元素。
$(".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';
});这段代码首先使用 this.parentNode.parentNode 找到 .show-more 的父元素的父元素，也就是 .text-container。然后，使用 querySelector('.content') 在 .text-container 下查找类名为 content 的元素。
2. 使用 closest() 方法
closest() 方法从当前元素开始，沿 DOM 树向上查找，直到找到匹配选择器的第一个元素。
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.closest(".text-container").find(".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") 找到 .show-more a 链接最近的 .text-container 父元素。然后，使用 .find(".content") 在 .text-container 下查找类名为 content 的元素。
3. 使用 parents() 方法
parents() 方法返回当前元素的所有祖先元素，可以配合 find() 方法使用。
$(".show-more a").on("click", function() {
var $this = $(this);
var $content = $this.parents(".text-container").find(".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.parents(".text-container") 找到 .show-more a 链接的所有 .text-container 父元素。由于只有一个 .text-container 父元素，所以 parents() 返回的是一个包含一个元素的 jQuery 对象。然后，使用 .find(".content") 在 .text-container 下查找类名为 content 的元素。
CSS 样式
为了使“显示更多”功能正常工作，我们需要定义 showContent 和 hideContent 类的样式：
.showContent{
display:block;
}
.hideContent{
display:none;
}总结
在复杂的 DOM 结构中，准确地定位目标元素是关键。parentNode 和 querySelector 方法提供了基于 DOM 树的精确查找方式，而 closest() 和 parents() 方法则提供了更加灵活的向上查找方式。选择哪种方法取决于具体的 DOM 结构和需求。在实际开发中，建议优先考虑使用 closest() 方法，因为它更加简洁和易于理解。
注意事项：
- 在使用 parentNode 时，需要确保对 DOM 结构有清晰的理解，避免出现错误的遍历。
- 在使用 querySelector 时，需要注意选择器的语法，确保能够准确匹配目标元素。
- 在使用 closest() 和 parents() 方法时，需要注意选择器的性能，避免影响页面性能。
通过本文的学习，相信你已经掌握了在 jQuery 中定位嵌套子元素的常用方法，可以轻松应对各种复杂的 DOM 结构，实现各种交互效果。
