如何根据类查找子元素的父级 - Jquery

我已阅读过类似的问题，但我仍然是Jquery的新手，并且无法理解解决方案，并且非常感谢一个确切的示例。如何根据类查找子元素的父级 - Jquery

这里就是我想要做的事：

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

我要改变“孩子”只有当孩子拥有一个家长（不直接父），它的类是“父”的.innerHtml内容。

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

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

嵌套子跨度是由另一个库创建的，所以我没有权限给他们ID或任何东西。

我想到一个问题是这样的，但很明显，这个代码是不正确的：

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

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

什么是正确的方式做到这一点，并
如何防止出现问题，如果有在页面中没有“父”元素？

来源

2015-09-25 dwlorimer

你注意了这个jQuery，你想要一个jQuery的答案或香草JavaScript的答案？ – Jamiec

我会带。我可能更喜欢jQuery - 无论哪个更容易和最合适。我已经在页面上使用jQuery。 – dwlorimer

jQuery仍然很流行，但它作为DOM规范化程序/简化程序/自动迭代程序的角色已经开始变得完全冗余。另外，将动画升级到requestAnimationFrame的原因对于我来说是一种令人咋舌的用户。即使我故意不将它添加到新的应用程序中，我仍然偶尔会错过它。但是值得学习核心DOM东西和querySelectorAll API，即使您通常会使用JQ。 –

您可以使用document.querySelectorAll()发现有类“父”父带班“的孩子”的所有元素：匹配

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为你做了所有的迭代。

来源

2015-09-25 12:50:28 Pointy

这很完美！它效果很好。谢谢 - 我知道必须有一个简单的方法来做到这一点。 – dwlorimer

在jQuery中

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

这将改变任何.child元素的HTML内容，但只有当他们有一个家长.parent - 不只是直接的父。在香草JS

来源

2015-09-25 12:54:29 Jamiec

感谢您的具体jQuery答案。这比我想要做的要容易得多。 – dwlorimer

更短的代码：

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

来源

2015-09-25 13:00:53

如果你真的不想插入文本时.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东西引擎盖下的性能和寻找标记名称的东西会首先下来的不仅仅是通过在场景类更快。

来源

2015-09-25 13:17:24

如何根据类查找子元素的父级 - Jquery

回答

相关问题