Question

我有一个带有子菜单的导航菜单的通常无序列表......

HTML：

<ul>
  <li><a href="#">Link 1</a></li>
  <li>
    <a href="#">Link with submenu</a>
    <ul>
      <li><a href="#">Sublink 1</a></li>
    </ul>
   </li>
</ul>

父<li>内的所有链接都有边框半径。但是，如果父<li>有一个孩子<ul>，我不希望该链接具有半径。

我目前正在使用这个jQuery：

<script>
  $("li").has("ul").addClass("sub-radius");
</script>

除了定位<li>之外，它工作得很好，但是我需要它来定位孩子<a>并删除它的半径。

任何帮助都将不胜感激。

Answer 1

试试这个表达式：

$("li:has(ul) > a").addClass("sub-radius");

编辑：如果您不希望子项具有border-radii，请删除查询中的>。

Answer 2

这里你不需要jQuery，你可以单独使用CSS来实现。只需使用:only-child伪类：

a:only-child { /* define border-radius here */ }

现场演示： http://jsfiddle.net/QYaqb/

Answer 3

这适用于您的HTML

("li").has("ul").children("a").addClass("sub-radius");

Answer 4

我想你想要.find：

<script>
  $("li:has(ul)").find("a").addClass("sub-radius");
</script>

Answer 5

只需找到里面的a：

$("li").has("ul").find('a').addClass("sub-radius");

这是一个小提琴： http://jsfiddle.net/cBfMV/

jQuery addClass到子元素

5 个答案: