javascript - 查找并禁用 <a href>

Question

我的结构很奇怪，想使用 a[href="/abc"] 禁用 li.expanded 中的第一个元素。我有 parent 和 child 有相同的 href 和标题是不同的。如何选择仅父元素？

这里是代码:

<ul class="n-right m-menu__link-list" id="main-right-menu">
    <li class="first leaf"><a href="/xyz" title="xyz-parent">xyz-parent</a></li>
    <li class="leaf"><a href="/pqr" title="pqr">pqr</a></li>
    <li class="last expanded"><a href="/abc" title="abc">abc</a>  //want to find this element and apply treatment

      <ul class="n-right m-menu__link-list" id="main-right-menu">
        <li class="first leaf"><a href="/abc" title="abc1">abc</a></li>  //not this one
        <li class="last leaf"><a href="/mno" title="mno">mno</a></li>
    </ul>
    </li>
</ul>

我已经尝试过了，功能正常。它选择了 a[href="/abc"] parent 和 child 。我只想查找并选择父项。

openabcInNav: function() {
    var navEl = $('#main-menu, #main-right-menu li.expanded').find('a[href="/abc"]:nth-child(1)');
    navEl.addClass('doNotClose');
    navEl.on('click mouseover', function(event) {         
        event.preventDefault();
        $('nav.global-nav').find('li.expanded').toggleClass('show');
    });
},  

Answer 1

您可以使用 :first 选择器，它将返回第一次出现的父级:

$('ul>li.expanded>a[href="/abc"]:first')

$('ul>li.expanded>a[href="/abc"]:first').css('background-color', 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="n-right m-menu__link-list" id="main-right-menu">
  <li class="first leaf"><a href="/xyz" title="xyz-parent">xyz-parent</a></li>
  <li class="leaf"><a href="/pqr" title="pqr">pqr</a></li>
  <li class="last expanded"><a href="/abc" title="abc">abc</a> //want to find this element and apply treatment

    <ul class="n-right m-menu__link-list" id="main-right-menu">
      <li class="first leaf"><a href="/abc" title="abc1">abc</a></li> //not this one
      <li class="last leaf"><a href="/mno" title="mno">mno</a></li>
    </ul>
  </li>
</ul>