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

Question

我需要修改li类"blackcat-21 wnode"，在其中添加"active"，因为内部有一个带有选中类的链接：

<a id="cat-21" href="" class="selected">link</a>

父级“li”应更改为“blockcat-21 wnode active”。

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

- Roberto C.

---

请问能看到Jquery或JS吗？ - Rohit Kumar

什么是问题？ - sskoko

也许他想添加一个类，但是它被附加为子元素了 :imo - Rohit Kumar

是的，我必须将一个类附加到“blockcat-21 wnode”，使其变为“blockcat-21 wnode active”。 - Roberto C.

@RobertoC。可以使用JQuery吗？ - Naren Murali

Answer 1

虽然不是太困难的工作： 当选定的锚元素是 wnode 的后代时

纯净版

我们使用选择器 a.selected 的 document.querySelector。这将搜索具有类别 selected 的锚点元素。然后我们使用 closest 找到它，并使用 classlist 添加类别。如果浏览器不支持 closest，我们可以使用 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的closest方法来获取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>

- Mouser

---

完美！只是需要注意，如果例如id="cat-33"中的<a>变成了"select"，那么在第二层下面，如何以与之前相同的方式分配相同父级<li>中的类？（对于相同的父级，我指的是包含所有内容的“blockcat-21 wnode”） - Roberto C.

啊哈，我就在想什么时候会有这个问题。Jquery 对此非常方便。Vanilla 更难一些。请等几分钟，看看我的更新。 - Mouser

问题在于我只需要修改带有“wnode”类的类，因为我可能会有第二或第三级带有“selected”类链接的类。 - Roberto C.

Answer 2

你可以使用 querySelectorAll 和 parentNode 方法。这里的 document.querySelectorAll('a.selected') 将选择所有具有 selected 类的锚点标签，而 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>

- brk