javascript - 如何按类查找子元素的父元素 - Jquery

Question

我已经审查过类似的问题，但我仍然是 Jquery 的新手，并且无法理解解决方案，并且希望有一个确切的示例。

这就是我正在尝试做的事情:

<div class="parent">
    <span class="random">
       <span class="child">

仅当子项拥有类为“父项”的父项(不是直接父项)时，我才想更改“子项”的 .innerHtml 内容。

我确信“子”类会存在，但我不知道页面上是否存在“父”类。

可能有多个“子”类元素，也可能有多个“父”类元素。如果任何一个“子” child 拥有“ parent ”，他们都需要采取行动。

嵌套的子跨度是由另一个库创建的，因此我无权向它们提供 ID 或任何内容。

我期望这样的行为，但显然，这段代码是不正确的:

var children = document.getElementsByClass('child');

foreach(children as child){
   if (child.hasParent(.parent)){
        child.innerHTML = "New Text";
}

1. 执行此操作的正确方法是什么，以及
2. 如果页面中没有“父”元素，如何防止出现问题？

Answer 1

您可以使用 document.querySelectorAll() 查找具有类“child”且其父类具有“parent”类的所有元素:

var children = document.querySelectorAll(".parent .child");

这会返回一个匹配的节点列表，可能是一个空列表:

for (var i = 0; i < children.length; ++i)
  children[i].innerHTML = "New Text";

.querySelector() 和 querySelectorAll() 方法即使在 IE8 中也能工作(大部分)，因此这种方法非常通用。

由于您使用 jQuery 标记了问题，因此您也可以使用该库来完成此操作:

$(".parent .child").html("New Text");

这将使用“父”父节点更新所有“子”元素； jQuery 为您完成所有迭代。