javascript - 纯 JS 中 jQuery 的 contents() 方法

Question

所以我一直在尝试在不导入 jQuery 库的情况下执行以下代码：

$(".parent-class").contents().find(".child-class").css("color", "red");

我知道.contents()从 jQuery 文档 中获取匹配元素集中每个元素的子元素，包括文本和注释节点，但我认为我不明白该描述的含义。我试过让孩子们.parent-class：

let theChildren = document.querySelector('.parent-class').children;

但这并没有做同样的事情.contents().find(".child-class")。

编辑：根据评论中的要求，我提出了一个新问题，因为这个问题似乎不够具体。

score 1 · Accepted Answer

contents()当您需要选择文本节点时，主要在 jQuery 中使用。在第一个代码示例中，您根本不需要它，因为您使用find()类来选择元素。这些 jQuery 行将用于相同的目的：

$(".parent-class").find(".child-class").css("color", "red");
$(".parent-class .child-class").css("color", "red");

在普通的 JS 中，这将是：

document.querySelectorAll('.parent-class .child-class').forEach(el => el.style.color = 'red');

注意querySelectorAll()那里。这将返回一个 nodeList ，您需要以与 jQuery 代码相同的方式对其进行迭代以更新样式。

没有明确的 JS 等价物，contents()因为您手动遍历以查找要定位的节点，或使用querySelector()等getElementByX()来定位元素。

score 0 · Accepted Answer

这将获得第一个父类中的第一个子类：

let theChildren = document.querySelector('.parent-class .child-class');

这将获得每个父类中的所有子类：

let theChildren = document.querySelectorAll('.parent-class .child-class');

2 回答 2