Question

我已经审核了类似的问题，但我仍然是Jquery的新手，我很难理解这些解决方案，并希望得到一个确切的例子。

这是我想要做的事情：

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

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

我想更改＆＃34; child＆＃34;的.innerHtml内容只有当孩子拥有父母（不是直接父母）时，他们的班级是＆＃34;父母＆＃34;。

我肯定知道＆＃34;孩子＆＃34;上课会存在，但我不知道＆＃34;父母＆＃34;类存在于页面上。

可能有多个孩子＆＃34;类元素，可以是多个＆＃34; parent＆＃34;类元素。如果有任何一个孩子＆＃34;孩子们拥有父母＆＃34;他们都需要采取行动。

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

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

{{1}}

这样做的正确方法是什么，
如果没有＆＃34; parent＆＃34;我如何预防问题？页面中的元素？

Answer 1

您可以使用document.querySelectorAll()查找所有带有课程的元素＆＃34; child＆＃34;父母的课程为＃34;父母＆＃34;：

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");

这将更新所有＆＃34;孩子＆＃34;一个＆＃34;父母＆＃34;父节点; jQuery为你做了所有的迭代。

Answer 2

在jQuery中

a[i+1]

这会更改任何$(".parent .child").html("New Text");元素的html内容，但前提是它们有父.child - 而不仅仅是直接父级。

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内容来获得性能，并且通过标记名称查找内容首先会比在该场景中的类更快地缩小内容。

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

4 个答案: