javascript - css nth-child nth-last-of-type with javascript – 不带 jquery

Question

是否有可能仅使用纯 javascript 向 nth-child() 和 nth-last-of-type() 上诉（没有 jquery）？我想在很大程度上避免使用 jquery。

Answer 1

使用document.querySelectorAll。

例如

var elements = document.querySelectorAll('div:nth-child(5)');

---

document.querySelectorAll

概括

返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先前序遍历）。返回的对象是一个 NodeList。

句法

elementList = document.querySelectorAll(选择器);

在哪里

elementList是元素对象的非活动 NodeList。

selectors是一个字符串，包含一个或多个用逗号分隔的 CSS 选择器。

返回的 NodeList 将包含文档中与任何指定选择器匹配的所有元素。如果选择器字符串包含 CSS 伪元素，则返回的 elementList 将为空。

Answer 2

这应该会有所帮助。您可以使用它通过类名获取所需的元素。如果没有类，你也可以 .getElementById 。

var x = document.getElementsByClassName("class-name")[index#];

在这里看到它的工作：JSFiddle

Answer 3

使用 CSS :last-child选择器

: last-child选择器匹配作为其 parent的最后一个子元素的每个元素。

例如

var elements = document.querySelectorAll('div:last-child');

console.log(elements);

// example output
// NodeList(32)[div.container, div, div, ...]

参考：https ://www.w3schools.com/cssref/sel_last-child.asp