基于子链接元素更改列表元素上的父类

时间:2017-10-14 14:45:55

标签: javascript html css

我必须修改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>

2 个答案:

答案 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>

使用jQuery:

我们使用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)

您可以使用querySelectorAllparentNode方法。此处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>