是否有一種方法可以使用vanilla Javascript或Jquery在DOM之前選擇span類？

Question

我正在設計一個Squarespace網站，所以我沒有直接訪問HTML。 我想在網站的下拉菜單系統中添加一些CSS。 菜單系統的設置方式，它確實不會分配ID名稱，只分配類名稱。 因此，它有一個DIV，在一個DIV中，它有幾個SPAN類。 問題是所有文件夾SPANS都被命名為相同，所有HREF類都被命名為相同。 例如，我想要發生的是，如果用戶點擊“關於我們”，“Memstaff團隊”或“職業”，我想將一個名為“currentFolder”的類添加（不替換）給“ /關於“HREF是它之前的SPAN（其類名為”Header-nav-folder-title“）。但我不想影響后面的其他HREF，它也具有相同的CLASS “Header-nav-folder-title”的名稱。當用戶點擊任何其他鏈接時，我還想刪除類“currentFolder”，這樣我就可以重復這個過程。我知道Jquery的.closest（）和.find（）但對如何正確使用它們知之甚少。

<div class="Header-nav-inner">
<span class="Header-nav-item Header-nav-item--folder">
<a href="/about" class="Header-nav-folder-title">About</a>
<span class="Header-nav-folder">                      
<a href="/about-us" class="Header-nav-folder-item">About Us</a>
<a href="/memstaff-team" class="Header-nav-folder-item">MEMStaff Team</a>                                                        
<a href="/careers" class="Header-nav-folder-item">Careers</a>
</span>
</span><span class="Header-nav-item Header-nav-item--folder">
<a href="/job-seekers" class="Header-nav-folder-title">Job Seekers</a>
<span class="Header-nav-folder">
<a href="/submit-a-resume" class="Header-nav-folder-item">Submit a Resume</a>
<a href="/memstaff-jobs" class="Header-nav-folder-item">MEMStaff Jobs</a>
<a href="/referral-bonus" class="Header-nav-folder-item">Referral Bonus</a></span>
</span><a href="/for-employers" class="Header-nav-item">For Employers</a>
<a href="/contact" class="Header-nav-item">Contact</a>
</div>

Answer 1

$('a.Header-nav-folder-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
  // Add class to correct title element
  $(this).parent().siblings('.Header-nav-folder-title').eq(0).addClass('active');
});

// Remove active class when clicking on bottom two links
$('a.Header-nav-item').click(function() {
  //Remove active class from all title elements
  $('.Header-nav-folder-title').removeClass('active');
});

Answer 2

以下是一些我認為可以解決您問題的代碼。 您應該將其設置為在頁面導航時運行（可能是文檔加載）。

請注意，這僅在頁面路徑與鏈接href完全匹配時才有效。

// Get all of the folders
const folders = document.querySelectorAll('span.Header-nav-item--folder');

// Loop through the folders
for (const folder of folders) {
  // Variable for if one of the folder contents is the current page
  let childIsCurrent = false;
  // Get all of the links in the dropdown
  const links = folder.querySelectorAll('a.Header-nav-folder-item');

  // Loop through the links
  for (const link of links) {
    // Compare the link href with our current path
    if (link.href === location.pathname)
      childIsCurrent = true;
  }

  // Find the folder title
  const title = folder.querySelector('a.Header-nav-folder-title');
  // Add or remove the class
  if (childIsCurrent)
    title.classList.add('currentFolder');
  else
    title.classList.remove('currentFolder');
}