使用javascript / Jquery将类添加到父子孙列表项
我正在尝试动态地将类添加到嵌套列表项，即使子项和孙项的计数发生更改。
嵌套项的示例如下所示：
- parent： list1
- 孩子： list11
- 孙子： list111
- 孙子： list1112
- 孩子： list12
- 孙子： list121
- 孙子： list122
- 孩子： list11
问题是，如果我使用ul li ul添加类，它适用于所有子项和孙项。 有没有办法分别为孩子，孙子，曾孙等添加课程？
$('ul li ul a').addClass('child')
ul li a { color:red } .child { color:green; } a { text-decoration:none; }
Parent1
您需要的是直接子（ > ）的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; }
Grandparent 1
将Id提供给您的父div
. .
并使用以下代码
$('#parent ul li ul a').addClass('child');
因此，class级将仅附加到“父母”ID中的子孙
UPDATE
我更新了代码以使用您的codepen中给出的结构。
有关jQuery遍历的所有信息都可以通过浏览jQuery文档或阅读w3Schools教程找到 。
以下代码递归搜索
标记及其第一个标记，根据它们在树中的位置为每个标记提供一个类。
我还为您的“Parent1”和“Parent2”div添加了id属性以启动循环。
旁注：确保您的HTML有效，因为您在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; }
Parent1