Question

我的情况如下：

<ul class="mainnav">
<li><a href="http://example.com">title</a></li>
<li>
  <a href="http://example.com">title</a>
  <ul>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
  </ul>
</li>
<li><a href="http://example.com">title</a></li>
<li>
  <a href="http://example.com">title</a>
  <ul>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
</ul>
</li>
</ul>

我想在 jQuery 中将href属性值更改为“＃”，仅用于具有子导航的导航。

例如

<ul class="mainnav">
<li><a href="http://example.com">title</a></li>
<li>
  <a href="#">title</a>
  <ul>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
  </ul>
</li>
<li><a href="http://example.com">title</a></li>
<li>
  <a href="#">title</a>
  <ul>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
</ul>
</li>
</ul>

有谁知道怎么做？

Answer 1

试试这个： -

$('a').each(function(){
  if($(this).next('ul').find('a').length){
     $(this).attr('href','#')
  }
});

$('a').each(function(){
  if($(this).next('ul').find('a').length){
     $(this).css('color','red')
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainnav">
<li><a href="http://example.com">title</a></li>
<li>
  <a href="#">title</a>
  <ul>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
    <li><a href="http://example.com">title</a></li>
  </ul>
</li>
<li><a href="http://example.com">title</a></li>
<li>
  <a href="#">title</a>
  <ul>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
  <li><a href="http://example.com">title</a></li>
</ul>
</li>
</ul>

Answer 2

您实际上可以使用单个选择器实现此目的：

$('a:not(:only-child)').attr('href','#')

Answer 3

您可以使用li:has(ul) > a仅选择和操作a的{{1}}个兄弟元素，如下所示：

ul

＆＃13;

$('ul.mainnav > li:has(ul) > a').attr('href', '#');

＆＃13;

$('ul.mainnav > li:has(ul) > a').attr('href', '#');

＆＃13;

Answer 4

您可以定位a ul .mainnav后代的$('.mainnav ul').prev('a').attr('href', '#')兄弟姐妹

{{1}}

如何添加只有兄弟元素的元素的属性值

4 个答案: