本文旨在提供一种通用的 jQuery 方法，用于访问嵌套在多层父级元素下的子级 DIV，并以实现“显示更多/显示更少”功能为例进行演示。通过修改 DOM 遍历方式，使得代码能够适应更复杂的 HTML 结构，从而提高代码的复用性和健壮性。
问题背景与解决方案
在网页开发中，经常会遇到需要控制某个 DIV 元素的显示与隐藏，例如实现“显示更多”功能。通常的做法是，通过 jQuery 选择器找到触发事件的元素（例如，一个链接），然后根据其父元素的层级关系，找到需要操作的 DIV 元素。但是，当 HTML 结构发生变化，例如在目标 DIV 外面增加一层 wrapper，原有的 jQuery 代码可能就会失效。
为了解决这个问题，我们需要一种更通用的方法来访问目标 DIV 元素，而无需依赖于固定的父元素层级关系。本文将介绍如何使用 parentNode 和 querySelector 方法来实现这一目标。
使用 parentNode 和 querySelector
核心思路是：从触发事件的元素开始，向上遍历 DOM 树，直到找到一个合适的父元素（例如，包含所有相关元素的容器），然后在这个父元素下使用 querySelector 方法来查找目标 DIV 元素。
以下是一个具体的示例：
HTML 结构：
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 的元素下的 标签，并绑定一个点击事件处理函数。let div = this.parentNode.parentNode.querySelector(‘.content’);: 这是核心代码。this 指的是被点击的 标签。this.parentNode 获取其父元素（即
替代方案：使用 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”): 从当前元素（ 标签）开始，向上查找最近的 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 结构变化而导致的代码失效的风险。
以上就是jQuery 如何访问子级 DIV：实现“显示更多”功能的通用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573276.html
微信扫一扫 
支付宝扫一扫 
