Question

如果任何子链接包含某个单词，我需要向最上面的父级添加一个类。

这是我的HTML（我无法更改）

<ul id="dropdown-nav" class="nav">
  <li class="n1"><a class="n1  parent" href="/nolink.php" onclick="return false;" title="Find a Car">Find a Car <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/search_page.php" title="Showroom">Showroom</a></li>
      <li class="n2"><a class="n2 " href="/partex.php" title="Part Exchange">Part Exchange</a></li>
      <li class="n3"><a class="n3 " href="/same-day-drive-away.php" title="Same Day Drive Away">Same Day Drive Away</a></li>
      <li class="n4"><a class="n4 " href="/contact.php" title="Plan Your Visit">Plan Your Visit</a></li>
    </ul>
  </li>
  <li class="n2"><a class="n2  parent" href="/nolink.php" onclick="return false;" title="Our Services">Our Services <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/warranty_autoprotect.php" title="Warranty">Warranty</a></li>
      <li class="n2"><a class="n2 " href="/gap.php" title="GAP">GAP</a></li>
      <li class="n3"><a class="n3 " href="/paint-protection.php" title="Paint Protection">Paint Protection</a></li>
    </ul>
  </li>
  <li class="n3"><a class="n3  parent" href="/nolink.php" onclick="return false;" title="Finance a Car">Finance a Car <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/finance.php" title="Finance A Car">Finance A Car</a></li>
      <li class="n2"><a class="n2 " href="/finance-explained.php" title="Finance Explained">Finance Explained</a></li>
      <li class="n3"><a class="n3 " href="/bad_credit.php" title="Credit Problems">Credit Problems</a></li>
    </ul>
  </li>
  <li class="n4"><a class="n4  parent" href="/nolink.php" onclick="return false;" title="Why Dani Motors">Why Dani Motors <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/about.php" title="Why Dani Motors">Why Dani Motors</a></li>
      <li class="n2"><a class="n2 " href="/after-sales.php" title="After Sales">After Sales</a></li>
      <li class="n3"><a class="n3 " href="/customer-reviews.php" title="Customer Reviews">Customer Reviews</a></li>
      <li class="n4"><a class="n4 " href="/faq.php" title="FAQ">FAQ</a></li>
      <li class="n5"><a class="n5 " href="/blog.php" title="Blog">Blog</a></li>
    </ul>
  </li>
</ul>

这是我目前的jQuery，这似乎不起作用，想法？

$('ul#dropdown-nav li a').each(function() {
    if ($(this).attr('href').indexOf($('body').attr('id')) >= 0) {
      $(this).parent('ul#dropdown-nav > li').addClass('test');
      return;
    }
});

Answer 1

您可以使用closest()之类的：

$(this).closest('li').addClass('test');

要获得您可以使用的顶级父li：

$(this).parents('li').last().addClass('test');

希望这有帮助。

示例：

$('ul#dropdown-nav li a').each(function() {
 if ($(this).attr('href').indexOf('finance') >= 0) {
    $(this).parents('li').last().addClass('test');
  }
});

.test{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dropdown-nav" class="nav">
  <li class="n1"><a class="n1  parent" href="/nolink.php" onclick="return false;" title="Find a Car">Find a Car <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/search_page.php" title="Showroom">Showroom</a></li>
      <li class="n2"><a class="n2 " href="/partex.php" title="Part Exchange">Part Exchange</a></li>
      <li class="n3"><a class="n3 " href="/same-day-drive-away.php" title="Same Day Drive Away">Same Day Drive Away</a></li>
      <li class="n4"><a class="n4 " href="/contact.php" title="Plan Your Visit">Plan Your Visit</a></li>
    </ul>
  </li>
  <li class="n2"><a class="n2  parent" href="/nolink.php" onclick="return false;" title="Our Services">Our Services <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/warranty_autoprotect.php" title="Warranty">Warranty</a></li>
      <li class="n2"><a class="n2 " href="/gap.php" title="GAP">GAP</a></li>
      <li class="n3"><a class="n3 " href="/paint-protection.php" title="Paint Protection">Paint Protection</a></li>
    </ul>
  </li>
  <li class="n3"><a class="n3  parent" href="/nolink.php" onclick="return false;" title="Finance a Car">Finance a Car <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/finance.php" title="Finance A Car">Finance A Car</a></li>
      <li class="n2"><a class="n2 " href="/finance-explained.php" title="Finance Explained">Finance Explained</a></li>
      <li class="n3"><a class="n3 " href="/bad_credit.php" title="Credit Problems">Credit Problems</a></li>
    </ul>
  </li>
  <li class="n4"><a class="n4  parent" href="/nolink.php" onclick="return false;" title="Why Dani Motors">Why Dani Motors <span aria-hidden="true" class="icon icon-arrow-down"></span></a>
    <ul class="sub-menu-cd">
      <li class="n1"><a class="n1 " href="/about.php" title="Why Dani Motors">Why Dani Motors</a></li>
      <li class="n2"><a class="n2 " href="/after-sales.php" title="After Sales">After Sales</a></li>
      <li class="n3"><a class="n3 " href="/customer-reviews.php" title="Customer Reviews">Customer Reviews</a></li>
      <li class="n4"><a class="n4 " href="/faq.php" title="FAQ">FAQ</a></li>
      <li class="n5"><a class="n5 " href="/blog.php" title="Blog">Blog</a></li>
    </ul>
  </li>
</ul>

如果孩子在HREF中有单词，则为父级添加课程

1 个答案: