如何为包含子列表的顶级LI元素内的链接追加内容？

嘿，我明白你的问题啦——你想给那些包含子列表的顶级<li>里的链接追加zzz，但现在的代码不小心把子列表里的链接也一起修改了，这肯定不是你想要的效果对吧？

先看一下你的HTML结构，是典型的嵌套列表，顶级<li>里有的包含了子<ul>，你只想给这些顶级<li>直接包含的<a>加内容。

问题出在哪？ #

你当前的JS代码里用了$(this).find('a')，这个方法会查找当前<li>下所有后代的<a>标签，包括子列表里的那些，所以才会把所有嵌套的链接都加上zzz。

两种解决方法 #

方法一：用children()替代find()

children()只会匹配当前元素的直接子元素，不会深入到后代节点，刚好符合你的需求：

$('#container > ul > li').has('ul').each(function() { 
  $(this).children('a').append('zzz'); 
});

方法二：一步到位的精准选择器

我们可以直接在选择器里定位到目标链接，省去each循环，代码更简洁：

$('#container > ul > li:has(ul) > a').append('zzz');

这个选择器的逻辑很清晰：

1. #container > ul > li:has(ul)：选中container下顶级<ul>里包含子<ul>的那些<li>
2. > a：只选中这些<li>的直接子元素<a>标签

这样就完美实现了你要的效果——只有包含子列表的顶级<li>里的链接会被追加内容，子列表里的链接完全不受影响。

内容的提问来源于stack exchange，提问作者santa