请看下面的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>
或者你也可以通过其他的 querySelector
:
var selected = document.querySelector('ul li a.active');
var span = selected && document.querySelector('span.caret');
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>