简体   繁体   English

是否有一种方法可以使用vanilla Javascript或Jquery在DOM之前选择span类?

[英]Is there a way with either vanilla Javascript or Jquery to select a span class before in the DOM?

I am designing a Squarespace site, so I do not have direct access to the HTML. 我正在设计一个Squarespace网站,所以我没有直接访问HTML。 I would like to add some CSS to the site's drop down menu system. 我想在网站的下拉菜单系统中添加一些CSS。 And the way the menu system is setup, it does give not assign ID names, only class names. 菜单系统的设置方式,它确实不会分配ID名称,只分配类名称。 So, it has one DIV and within that one DIV, it has several SPAN classes. 因此,它有一个DIV,在一个DIV中,它有几个SPAN类。 The problem is that all the folder SPANS are all named the same and all the HREF classes are all named the same. 问题是所有文件夹SPANS都被命名为相同,所有HREF类都被命名为相同。 What I would like to happen for example, is that if the user clicks on a either "About Us," "Memstaff Team, or "Careers," I would like to add (not replace) a class named "currentFolder" to the "/about" HREF which is the SPAN right before it (which has a class name of "Header-nav-folder-title"). But I do not want to effect the other HREF that comes after, which also has the same exact CLASS name of "Header-nav-folder-title." I would also like to remove the class "currentFolder" when a user clicks on any of the other links so I can repeat the process. I am aware of Jquery's .closest() and .find() but do not know enough on how to use them properly. 例如,我想要发生的是,如果用户点击“关于我们”,“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>
$('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');
});

Here is some code that I think may solve your problem. 以下是一些我认为可以解决您问题的代码。 You should set it to run whenever the page navigates (document load probably). 您应该将其设置为在页面导航时运行(可能是文档加载)。

Note that this will only work if the page path exactly matches the link href. 请注意,这仅在页面路径与链接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');
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM