内部的孩子和孙子
我正在尝试动态地将类添加到嵌套列表项目中，即使儿童和孙子的计数发生了变化。
样本嵌套的项目看起来像这样：
-
父母： list1
- 儿童： list1111
- 孙子： list111
- 孙子： list1112
- 儿童： list12
- 孙子： list121
- 孙子： list122
- 儿童： list1111
问题是，如果我使用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 -->您需要的是直接子女的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');
这也是JSfiddle的一个工作演示。
给您的父级div
<div id="parent">
.
.
</div>
并使用以下代码
$('#parent ul li ul a').addClass('child');
因此，班级只会附加到"父母" ID
update
我更新了代码，以与您的Codepen中给出的结构一起使用。
可以通过查看jQuery文档或通过W3Schools教程来找到有关jQuery遍历的所有信息。
以下代码递归搜索<li></li>标签及其第一个<a></a>标签，根据其在树中的位置给出了每个标签。
我还向您的" parent1"one_answers" parent2"divs添加了 id属性以启动循环。
sidenote：确保您的HTML有效，因为您在Codepen链接中发布的代码存在严重的格式化问题，并且从关键元素中丢失了许多会扭曲列表结构的关键元素。
请参阅以下片段以及此更新的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>