使用javascript / Jquery将类添加到父子孙列表项 [英] Adding class to parent child grandchild list items using javascript/Jquery
问题描述
我正在尝试动态地将类添加到嵌套列表项，即使子项和孙项的计数发生更改。
I am trying to add class to nested list items dynamically, even if the count of child and grandchild items change.
示例嵌套项目看起来如何像这样：
- 父母： list1
- 孩子： list11
- 孙子： list111
- 孙子： list1112
- parent: list1
- child: list11
- grandchild: list111
- grandchild: list1112
- 孙子： list121
- 孙子： list122
- grandchild: list121
- grandchild: list122
问题是，如果我使用
ul li ul添加类，它适用于所有子项和孙项。有没有办法分别为孩子，孙子，曾孙等添加课程？The issue is, if I add class using
ul li ul, it applies to all child and grandchild items. Is there any way to add class separately to child, grandchild, great grandchild, and so on?$('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 -->推荐答案
更新
我更新了代码以使用您的codepen中给出的结构。
I updated the code to work with the structure given in your codepen.
有关jQuery遍历的所有信息都可以通过查看 jQuery docs 或阅读 w3Schools教程。
All information regarding jQuery traversal can be found by looking through the jQuery docs or reading through the w3Schools tutorial.
以下代码递归搜索
< li>< / li>标记及其第一个< a>< / a>标签，根据他们在树中的位置为每个人提供一个课程。The following code recursively searches for
<li></li>tags and their first<a></a>tags, giving each of them a class based on their position in the tree.I还为您的Parent1和Parent2div添加了
id属性以启动循环。I also added
idattributes to your "Parent1" and "Parent2" divs to initiate the loop.旁注：确保您的HTML有效，因为您在codepen链接中发布的代码存在严重的格式问题，并且关键元素中缺少许多关闭标记会使列表的结构变形。
Sidenote: Make sure your HTML is valid, as the code you posted in your codepen link had severe formatting issues and many, many closing tags were missing from key elements which would warp the list's structure.
请参阅以下代码段以及此更新的代码集。
See the below snippet, as well as 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>这篇关于使用javascript / Jquery将类添加到父子孙列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- child: list11
- 孩子： list11
