如何通过 class - Jquery 查找 child 元素的 parent

Question

我已经查看过类似的问题，但我在 Jquery 还是个新手，无法理解解决方案，希望能提供一个确切的例子。

这是我正在尝试做的事情：

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

我想更改 "child" 的 .innerHtml 内容，仅当 child 拥有 parent（不是直接的 parent）时 class 是 "parent".

我确定 "child" class 会存在，但我不知道页面上是否存在 "parent" class。

可能有多个 "child" class 元素，也可能有多个 "parent" class 元素。如果"child"child人中有人拥有"parent"，他们都需要采取行动。

嵌套的 child span 是由另一个库创建的，所以我无权为它们提供 ID 或任何东西。

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

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

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

这样做的正确方法是什么，
如果页面中没有 "parent" 元素，如何防止出现问题？

Answer 1

您可以使用 document.querySelectorAll() 来查找具有 class "child" 且其父元素具有 class "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");

这将使用 "parent" 父节点更新所有 "child" 元素； jQuery 为您完成所有迭代。

Answer 2

在jQuery

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

这将更改任何 .child 元素的 html 内容，但前提是它们有父元素 .parent - 而不仅仅是直接父元素。

Answer 3

Vanilla JS 中更短的代码：

var children = document.querySelectorAll(".parent .child");
[].forEach.call(children, function(elem){
   elem..innerHTML = "New Text";
});

Answer 4

如果您实际上不想在 .parent 是直接父级时插入文本。这是一个操作，JQ 可能仍然在 querySelector 上有一些东西，虽然可能性很大，但可能有一些 css querySelector 支持我忘记了。

$('.parent .child').not('.parent > .child').html('stuff');

如果您需要识别任何非直接 .parent 父节点，您可以这样做：

$('.child').parent().parents('.parent');
//or ... '.parent:first'); just for the first one it finds.

哦，还有一件事可能对性能有一定的帮助，那就是添加 html 标签（如果可以的话），例如

$('div.parent p.child');

我认为 JQ 仍然使用引擎盖下的旧 DOM 东西来提高性能，并且首先通过标签名称查找东西比在那种情况下仅通过 class 更快地缩小范围。

如何通过 class - Jquery 查找 child 元素的 parent

How to find parent of child element by class - Jquery

javascript

jquery

children

parent-child