jQuery 如何定位嵌套的子元素：實現'顯示更多”功能

本文介紹了在使用jQuery 實現“顯示更多”功能時，如何有效地定位嵌套在多層DOM 結構中的目標子元素。重點講解了當目標元素被包裹在額外的父級容器中時，如何​​通過DOM 遍歷方法（如parentNode 和querySelector）或者closest()方法來準確地找到需要操作的元素，並提供代碼示例和注意事項，幫助開發者輕鬆應對複雜的DOM 結構。

在Web 開發中，經常會遇到需要通過JavaScript（特別是jQuery）來操作DOM 元素的情況。當DOM 結構比較簡單時，直接使用選擇器可以很容易地找到目標元素。但當DOM 結構變得複雜，元素嵌套層級較深時，如何準確地定位目標元素就成了一個問題。本文將以一個“顯示更多”功能的實現為例，詳細講解如何使用jQuery 定位嵌套的子元素。

問題描述

假設我們有如下HTML 結構，需要實現點擊“Show more”鏈接，展開或收起內容區域的功能：

 <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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      <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>

其中，.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 結構，實現各種交互效果。

以上是jQuery 如何定位嵌套的子元素：實現'顯示更多”功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！