如何添加只有同级元素的属性值

How to add attribute value of an element that only has siblings

本文关键字：元素 属性 何添加 添加      更新时间：2023-09-26

我在下面有一个这样的场景：

<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>

有谁知道该怎么做？

您可以使用

li:has(ul) > a仅选择和操作作为ul同级的a元素，如下所示：

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


$('ul.mainnav > li:has(ul) > a').attr('href', '#');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

试试这个：-

$('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>

实际上，您可以使用单个选择器来实现这一点： 

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

您可以定位ul .mainnav后代的前a兄弟姐妹 

$('.mainnav ul').prev('a').attr('href', '#')
相关文章：