DOM CSS选择器:如果li有活动类,如何选择父元素的兄弟姐妹?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM CSS选择器:如果li有活动类,如何选择父元素的兄弟姐妹?相关的知识,希望对你有一定的参考价值。

请看下面的html结构。我想在父跨度中添加类,如果任何一个li有活动类。

<span class="caret menus">Test</span>
<ul class="nested">
    <li>
        <a>Test1</a>
    </li>
    <li>
        <a>Test2</a>
    </li>
    <li>
        <a>Test3</a>
    </li>
    <li>
        <a class="active">Test4</a>
    </li>
</ul>

我试过用下面的代码,但只有我能够遍历直到嵌套。

var selected = document.querySelector('ul li a.active');
var close = selected && selected.closest('.nested');
答案

如果您想从您的结构中选择跨度,您可以使用 .previousElementSibling.

var selected = document.querySelector('ul li a.active');
var close = selected && selected.closest('.nested').previousElementSibling;
console.log(close)// returns span element
另一答案

span 是同级别的 ul的,不属于 a 你得到的。你需要通过HTML结构导航来获取它。

var selected = document.querySelector('ul li a.active');
var span = selected && selected.parentElement.parentElement.previousElementSibling;
if (span) span.classList.add('nested');
span.nested, li a.active 
  color: blue
<span class="caret menus">Blue if nested</span>
<ul class="nested">
    <li>
        <a>Test1</a>
    </li>
    <li>
        <a>Test2</a>
    </li>
    <li>
        <a>Test3</a>
    </li>
    <li>
        <a class="active">Test4</a>
    </li>
</ul>

以上是关于DOM CSS选择器:如果li有活动类,如何选择父元素的兄弟姐妹?的主要内容,如果未能解决你的问题,请参考以下文章

有 CSS 父选择器吗?

有 CSS 父选择器吗?

有 CSS 父选择器吗?

有 CSS 父选择器吗?

有 CSS 父选择器吗?

有 CSS 父选择器吗?