一分耕耘，一分收获！既然打开了这篇文章《jQuery 如何实现“显示更多”功能》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

本文旨在提供一种通用的 jQuery 方法，用于访问嵌套在多层父级元素下的子级 DIV，并以实现“显示更多/显示更少”功能为例进行演示。通过修改 DOM 遍历方式，使得代码能够适应更复杂的 HTML 结构，从而提高代码的复用性和健壮性。

问题背景与解决方案

在网页开发中，经常会遇到需要控制某个 DIV 元素的显示与隐藏，例如实现“显示更多”功能。通常的做法是，通过 jQuery 选择器找到触发事件的元素（例如，一个链接），然后根据其父元素的层级关系，找到需要操作的 DIV 元素。但是，当 HTML 结构发生变化，例如在目标 DIV 外面增加一层 wrapper，原有的 jQuery 代码可能就会失效。

为了解决这个问题，我们需要一种更通用的方法来访问目标 DIV 元素，而无需依赖于固定的父元素层级关系。本文将介绍如何使用 parentNode 和 querySelector 方法来实现这一目标。

使用 parentNode 和 querySelector

核心思路是：从触发事件的元素开始，向上遍历 DOM 树，直到找到一个合适的父元素（例如，包含所有相关元素的容器），然后在这个父元素下使用 querySelector 方法来查找目标 DIV 元素。

以下是一个具体的示例：

HTML 结构：

  
Title goes here
  
Subtitle
  

    

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
      
Some more text
      

        
Some more text
        
Some more text
        
Some more text
      
    
  
  

    Show more
  

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;
}

代码解释：

1. $(".show-more a").on("click", function() { ... });: 这部分代码选择所有 class 为 show-more 的元素下的 标签，并绑定一个点击事件处理函数。
2. let div = this.parentNode.parentNode.querySelector('.content');: 这是核心代码。this 指的是被点击的 标签。this.parentNode 获取其父元素（即
   ），然后再次使用 parentNode 获取

   的父元素，也就是

   。最后，使用 querySelector('.content') 在

   元素下查找 class 为 content 的元素。
3. let classes = ['showContent', 'hideContent'];: 定义一个包含两个 class 名称的数组，用于切换 DIV 的显示状态。
4. if (div.classList.contains(classes[0])) { ... } else { ... }: 判断 DIV 当前是否包含 showContent class。如果包含，则替换为 hideContent；否则，替换为 showContent。 classList.replace 是 JavaScript 中用于替换元素 class 的方法。
5. 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);
});

代码解释：

1. $this.closest(".text-container"): 从当前元素（ 标签）开始，向上查找最近的 class 为 text-container 的祖先元素。
2. $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 结构变化而导致的代码失效的风险。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。