Javascript/jQuery - 添加自定义 html 属性到 parent div 基于匹配当前网页 child <a href> 标签内的值 link

Question

我正在尝试将自定义 HTML 属性添加到 parent <div> 标签，然后将当前网页的相对路径与嵌套在其中的 <a href> 标签匹配parent.

中的一些其他 div

这是我的例子：

<!--Section 1 Nav-->
<div class="wizard-step" data-wizard-type="step">
  <div class="wizard-wrapper">
    <div class="wizard-label">
      <div class="wizard-title">
        <a href="/relative/path/to/web/page/section1/"> Section 1</a>
      </div>
    </div>
  </div>
</div>
<!--Section 2 Nav-->
<div class="wizard-step" data-wizard-type="step">
  <div class="wizard-wrapper">
    <div class="wizard-label">
      <div class="wizard-title">
        <a href="/relative/path/to/web/page/section2/"> Section 2</a>
      </div>
    </div>
  </div>
</div>
<!--Section 3 Nav-->
<div class="wizard-step" data-wizard-type="step">
  <div class="wizard-wrapper">
    <div class="wizard-label">
      <div class="wizard-title">
        <a href="/relative/path/to/web/page/section3/"> Section 3</a>
      </div>
    </div>
  </div>
</div>
.... (many other sections)

如果当前网页的相对路径与[=19=匹配，我必须将自定义属性data-wizard-state="current"添加到parentdiv<div class="wizard-step" data-wizard-type="step">之一] 在每个部分的 div 中。我熟悉 parentNode 和 children 的概念，但似乎我还不太了解，或者我可能完全使用了错误的概念。我怎样才能做到这一点？

感谢任何帮助。祝你有美好的一天。谢谢！

Answer 1

您可以使用类似于

的方法检查window.location.pathname是否匹配其中一个a-href值

const escapedRef = window.location.pathname.replace(/["\]/g, '\$&');
document // or the parent-node of your list
  .querySelectorAll(`a[href^="${escapedRef}"]`) // adding a startwith to match query and hash too
  .forEach((node) => {
     console.log(node);
     node // a
       .parentNode // .wizard-title
       .parentNode // .wizard-label
       .parentNode // .wizard-wrapper
       .parentNode // .wizard-step
       .setAttribute("data-wizard-state","current");
  });

Javascript/jQuery - 添加自定义 html 属性到 parent div 基于匹配当前网页 child <a href> 标签内的值 link

Javascript/jQuery - Adding custom html attribute to parent div based on the value inside a child <a href> tag matching the current webpage link

html

javascript

css

jquery

dom-manipulation