如何选择CSS类的最深用途?
How to select the deepest use of a css class?
在下面的列表中,我如何选择对类 .active 的最深入的使用,在这种情况下,是< li> 包装<span> Item 1.1.1.1</span> ?
In the following list, how do I select the deepest use of the class .active, in this case been the <li> wrapping <span>Item 1.1.1.1</span>?
<ul> <li class="active"> <span>Item 1</span> <ul> <li class="active"> <span>Item 1.1</span> <ul> <li> <span>Item 1.1.1</span> <ul> <li class="active"> // need selector for this <li> <span>Item 1.1.1.1</span> <ul> <li> <span>Item 1.1.1.1.1</span> </li> <li> <span>Item 1.1.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> <li> <span>Item 1.2</span> <ul> <li> <span>Item 1.2.1</span> <ul> <li> <span>Item 1.2.1.1</span> <ul> <li> <span>Item 1.2.1.1.1</span> </li> <li> <span>Item 1.2.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <ul> 推荐答案您可以使用jQuery :not 和:has 选择器(如下所示)来选择最深的活动li:
You could use jQuery :not and :has selectors like below to select the deepest active li:
$('li.active:not(:has(.active))')说明
jQuery(:not(selector)"):选择与给定选择器不匹配的所有元素.
Explanation
jQuery( ":not(selector)" ): Selects all elements that do not match the given selector.
jQuery(:has(selector)"):选择包含至少一个与指定选择器匹配的元素的元素.
jQuery( ":has(selector)" ): Selects elements which contain at least one element that matches the specified selector.
$('li.active:not(:has(.active))').css("border", "1px solid red"); <script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active"> <span>Item 1</span> <ul> <li class="active"> <span>Item 1.1</span> <ul> <li> <span>Item 1.1.1</span> <ul> <li class="active"> <span>Item 1.1.1.1</span> <ul> <li> <span>Item 1.1.1.1.1</span> </li> <li> <span>Item 1.1.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> <li> <span>Item 1.2</span> <ul> <li> <span>Item 1.2.1</span> <ul> <li> <span>Item 1.2.1.1</span> <ul> <li> <span>Item 1.2.1.1.1</span> </li> <li> <span>Item 1.2.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <ul>
更多推荐
如何选择CSS类的最深层用途?
发布评论