我正在尝试动态地将类添加到嵌套列表项，即使子项和孙项的计数发生了变化。
示例嵌套项目如下所示：
问题是，如果我使用ul li ul添加类，它适用于所有子项和孙项。有没有办法分别为孩子，孙子，曾孙等添加课程？
$('ul li ul a').addClass('child')ul li a {
color:red
}
.child {
color:green;
}
a {
text-decoration:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Parent1
<ul>
<li><a href="#">Grandparent</a>
<div>
<ul>
<li>
<a href="#">Child</a>
<div>
<ul>
<li> <a href="#">Child1</a>
<ul><li><a href="#"> Grandchild11</a></li></ul>
</li>
<li> <a href="#">Child2</a>
<ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#"> Child2 </a>
<ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
</li>
</ul>
</div>
</li>
</ul>
</div> <!-- Parent1 -->
<div>Parent2
<ul>
<li>
<a href="#">Grandparent</a>
<div>
<ul>
<li>
<a href="#">Child</a>
<div>
<ul>
<li>
<a href="#">Child1</a>
<ul><li><a href="#"> Grandchild11</a></li></ul>
</li>
<li>
<a href="#">Child2</a>
<ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#"> Child2 </a>
<ul><li><a href="#">GrandChild21</a></li><li><a href="#">grandchild22</a></li></ul>
</li>
</ul>
</div>
</li>
</ul>
</div> <!-- Parent2 -->
答案 0 :(得分：0)
<强>更新
我更新了代码以使用您的codepen中给出的结构。
有关jQuery遍历的所有信息都可以通过查看jQuery docs或阅读w3Schools tutorial来找到。
以下代码递归搜索<li></li>标记及其第一个<a></a>标记，根据它们在树中的位置为每个标记提供一个类。
我还为您的＆＃34; Parent1＆＃34;添加了id个属性和＃34; Parent2＆＃34; div启动循环。
旁注：确保您的HTML有效，因为您在codepen链接中发布的代码存在严重的格式问题，并且关键元素中缺少许多很多关闭标记会导致列表变形＃39结构。
请参阅以下代码段以及this updated codepen。
$(function() {
CreateListHierarchy($('#Parent1'), 'list');
//CreateListHierarchy($('#Parent2'), 'list'); //Add this to sort both lists
});
function CreateListHierarchy(parent, className) {
let firstList = $(parent).find('li:first');
$(firstList).find('a:first').each(function() {
$(this).addClass(className + '1');
console.log($(this).text() + ', ' + $(this).attr('class'));
CreateListHierarchy(firstList, className + '1');
});
$(firstList).siblings('li').each(function(sinblingIdx) {
let currentSibling = this;
$(currentSibling).find('a:first').each(function(index) {
$(this).addClass(className + (index + 2));
console.log($(this).text() + ', ' + $(this).attr('class'));
CreateListHierarchy(currentSibling, className + (index + 2));
});
});
}.list1 {
color: red;
}
.list11 {
color: green;
}
.list1121, .list1122 {
color: lightblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Parent1">Parent1
<ul>
<li>
<a href="#">Grandparent</a>
<div>
<ul>
<li>
<a href="#">Child</a>
<div>
<ul>
<li>
<a href="#">Child1</a>
<ul>
<li>
<a href="#"> Grandchild11</a>
</li>
</ul>
</li>
<li>
<a href="#">Child2</a>
<ul>
<li>
<a href="#">GrandChild21</a>
</li>
<li>
<a href="#">grandchild22</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#"> Child2 </a>
<ul>
<li>
<a href="#">GrandChild21</a>
</li>
<li>
<a href="#">grandchild22</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="Parent2">Parent2
<ul>
<li>
<a href="#">Grandparent</a>
<div>
<ul>
<li>
<a href="#">Child</a>
<div>
<ul>
<li>
<a href="#">Child1</a>
<ul>
<li>
<a href="#"> Grandchild11</a>
</li>
</ul>
</li>
<li>
<a href="#">Child2</a>
<ul>
<li>
<a href="#">GrandChild21</a>
</li>
<li>
<a href="#">grandchild22</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
答案 1 :(得分：0)
您需要的是直接子项（>）的CSS选择器，以指定您要定位的元素级别。您可以将jQuery更改为以下内容：
// $('ul li ul a').addClass('child')
var parent = 'ul > li';
var child = ' > div > ul > li';
// to target the child
$(parent + child + ' > a').addClass('child');
// to target the grandchild
$(parent + child + child + ' > a').addClass('grandchild');
// to target the great grandchild
$(parent + child + child + child + ' > a').addClass('greatgrandchild');a {
text-decoration:none;
}
ul li a {
color:red
}
.child {
color:green;
}
.grandchild {
color:orange;
}
.greatgrandchild {
color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Grandparent 1
<ul>
<li>
<a href="#">Parent</a>
<div>
<ul>
<li>
<a href="#">Child 1</a>
<div>
<ul>
<li>
<a href="#">Grandchild 1-1</a>
<div>
<ul><li><a href="#">Great Grandchild 1-1-1</a></li></ul>
</div>
</li>
<li>
<a href="#">Grandchild 1-2</a>
<div>
<ul>
<li><a href="#">Great Grandchild 1-2-1</a></li>
<li><a href="#">Great Grandchild 1-2-2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Child 2</a>
<div>
<ul>
<li><a href="#">Grandchild 2-1</a></li>
<li><a href="#">Grandchild 2-2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div> <!-- Grandparent 1 -->
<div>Grandparent 2
<ul>
<li>
<a href="#">Parent</a>
<div>
<ul>
<li>
<a href="#">Child 1</a>
<div>
<ul>
<li>
<a href="#">Grandchild 1-1</a>
<div>
<ul><li><a href="#"> Great Grandchild 1-1-1</a></li></ul>
</div>
</li>
<li>
<a href="#">Grandchild 1-2</a>
<div>
<ul>
<li><a href="#">Great Grandchild 1-2-1</a></li>
<li><a href="#">Great Grandchild 1-2-2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#"> Child 2</a>
<div>
<ul>
<li><a href="#">Grandchild 2-1</a></li>
<li><a href="#">Grandchild 2-2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div> <!-- Parent2 -->
重要 只要您的嵌套元素具有统一的“模式”，上述代码就会起作用。如果在任何情况下它们都没有，您只需修改
var child的值，或添加另一个具有不同值的值。例如：
var parent = 'ul > li';
var child = ' > div > ul > li'; /*ul enclosed in div*/
var grandchild = ' > ul > li'; /*ul not enclosed in div*/
// to target the grandchild
$(parent + child + grandchild + ' > a').addClass('grandchild');
答案 2 :(得分：0)
将Id提供给您的父div
<div id="parent">
.
.
</div>
并使用以下代码
$('#parent ul li ul a').addClass('child');
所以课程只会附加到'父母'id
中的孩子和孙子