将类添加到<一个 href>如果嵌套 ul

Question

我有以下菜单

<ul>
    <li><a href="index.html">Main1</a></li>
    <li>
        <a href="#">Main2</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

和im尝试，尽管JS如果有父菜单，则在<a href>中添加类

<ul>
    <li><a href="index.html">Main1</a></li>
    <li>
        <a href="#" class="hassubmenu">Main2</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

$("li").has( "ul" ).addClass('contains-sub-menu'); 

仅将类添加到<li>，如何将其添加到<a>。

Answer 1

@DCI Studios Ltd 您太接近了正确的解决方案。您只是错过了第一个链接，然后将类添加到该链接

喜欢下面： -

$('li').has('ul').find('a:first').addClass('hassubmenu');

工作片段： -

$('li').has('ul').find('a:first').addClass('hassubmenu');

.hassubmenu{ /*to show you that code worked*/
  color:green;
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="index.html">Main1</a> </li>
  <li> <a href="#">Main2</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
  <li><a href="index.html">Main3</a></li>
  <li> <a href="#">Main4</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
</ul>

一个更好的解决方案是我先前提供的（修改后@a。Wolff建议的内容）： -

$('li ul').parent().children('a').addClass('hassubmenu');

工作片段： -

$('li ul').parent().children('a').addClass('hassubmenu');

.hassubmenu{ /*to show you that code worked*/
  color:green;
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> <a href="index.html">Main1</a> </li>
  <li> <a href="#">Main2</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
  <li><a href="index.html">Main3</a></li>
  <li> <a href="#">Main4</a>
    <ul class="sub-menu">
       <li> <a href="#">Link</a> </li>
       <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
      <li> <a href="#">Link</a> </li>
    </ul>
  </li>
</ul>