jQuery 如何访问子级 DIV：实现“显示更多”功能的通用方法

本文旨在提供一种通用的 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 代码：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

$(".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 的元素下的 <a> 标签，并绑定一个点击事件处理函数。
2. 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 的元素。
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"): 从当前元素（<a> 标签）开始，向上查找最近的 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 结构变化而导致的代码失效的风险。

以上就是jQuery 如何访问子级 DIV：实现“显示更多”功能的通用方法的详细内容，更多请关注php中文网其它相关文章！