我必须修改li class" blackcat-21 wnode"添加"活动",因为内部选择了类的链接:
<a id="cat-21" href="" class="selected">link</a>
父母&#34; li&#34;应该改变&#34; blockcat-21 wnode active&#34;
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title=""></a>
</li>
</ul>
答案 0 :(得分:0)
虽然不是太难的工作:
当选定的锚元素是wnode
我们将document.querySelector
与选择器a.selected
一起使用。这将搜索具有类selected
的锚元素。然后我们使用closest
来查找它。并使用classlist
添加该类。如果浏览器不支持最接近,我们可以使用polyfill。
document.querySelector
返回找到的第一个孩子。如果您想更新更多使用brk解决方案的节点。
//using very modern browsers
if (Element.prototype.closest) {
document.querySelector("a.selected").closest(".wnode").classList.add("active");
}
//else
else {
//use the polyfill from MDN
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement;
} while (el !== null);
return null;
};
document.querySelector("a.selected").closest(".wnode").classList.add("active");
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title="">link 2</a>
</li>
</ul>
</li>
我们使用a.selected
选择有效链接。我们可以使用jQuery最接近的方法来将DOM树提升到wnode
祖先。然后使用addClass
和中提琴。
$("a.selected").closest(".wnode").addClass("active");
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title="">link 2</a>
</li>
</ul>
</li>
答案 1 :(得分:0)
您可以使用querySelectorAll
和parentNode
方法。此处document.querySelectorAll('a.selected')
将选择所有具有selected
类&amp; parentNode将选择它的父
var getAllSelected = document.querySelectorAll('a.selected');
for (var x = 0; x < getAllSelected.length; x++) {
getAllSelected[x].parentNode.classList.add('active')
}
.active {
color: green;
}
<li class="blockcat-21 wnode">
<a id="cat-21" href="" class="selected">link</a>
<ul style="display: block;">
<li class="blockcat-33">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-22">
<a id="cat-33" href="" class="noselect" title="">link 2</a>
</li>
<li class="blockcat-34 last">
<a id="cat-34" href="" class="noselect" title=""></a>
</li>
</ul>