有没有什么方法可以在当前打开的页面url上应用javascript函数

Question

   <div><li class="item-list1"></li>
        <ul>
          <li class="item"><a href='/link1'></a>link1</li>
          <li class="item"><a href='/link2'></a>link2</li>
          <li class="item"><a href='/link3'></a>link3</li>
        </ul>
    </div>

   <div><li class="item-list2"></li>
        <ul>
          <li class="item"><a href='/link4'></a>link4</li>
          <li class="item"><a href='/link5'></a>link5</li>
          <li class="item"><a href='/link6'></a>link6</li>
        </ul>
    </div>

基本上，我想在当前URL的父级上应用javascript属性。

例如，如果当前的打开链接是link4，那么我想找到打开链接的祖父母，即item-list2

我正在执行window.location.href（）。parent（）。parent（），但它没有帮助。

Answer 1

您的HTML无效。

一旦有效，您可以执行以下操作:

null

const pathname= new URL("https://www.yoursite.com/link4").pathname; // location.pathname; // on your server
console.log(pathname); 
// must be quoted due to the / in the pathname 
const $link = $("[href='" + pathname + "']"); // you can use a template literal too
const $parentUl = $link.closest("ul")
const $ulContainer = $parentUl.closest("li");
console.log($ulContainer.attr("class"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="item-list1">
      <ul>
        <li class="item">
          <a href='/link1'>link1</a></li>
        <li class="item">
          <a href='/link2'>link2</a></li>
        <li class="item">
          <a href='/link3'>link3</a></li>
      </ul>
    </li>
  </ul>
</div>

<div>
  <ul>
    <li class="item-list2">
      <ul>
        <li class="item">
          <a href='/link4'>link4</a></li>
        <li class="item">
          <a href='/link5'>link5</a></li>
        <li class="item">
          <a href='/link6'>link6</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

const pathname = window.location.pathname
$(`a[href='${pathname}']`).parent().parent()