在纯 JavaScript 中获取元素的第 n 个子编号答案

【问题标题】：Get an element's nth-child number in pure JavaScript在纯 JavaScript 中获取元素的第 n 个子编号
【发布时间】：2018-03-22 13:57:18
【问题描述】：

我正在为我的网站创建一个函数，在该函数中我设置了一个包含该元素的第 n 个子编号的数据属性。

我的 HTML 标记：

<html>
<body>
    <section class="hardware">some text, nth-child is one</section>
    <section class="hardware">some text, nth-child is two</section>
    <section class="hardware">some text, nth-child is three</section>
    <section class="hardware">some text, nth-child is four</section>
    <section class="hardware">some text, nth-child is five</section>
</body>
</html>

到目前为止我的 JavaScript：

var selector = document.getElementsByClassName('hardware');
for(var i = 0; i <= selector.length; i++) {
    var index = selector[i] //get the nth-child number here
    selector[i].dataset.number = index;
}

如何使用纯 JavaScript（不是 jQuery）获取元素的第 n 个子编号，这在 JavaScript 中是否可行？

【问题讨论】：

那是纯javascript不？
@bitoiu 是的，但是我怎样才能得到第 n 个孩子的号码？
如果可以使用 jQuery，也可以不使用。请记住，jQuery 只是一组 JS 函数。它使事情变得更容易，它不会添加额外的功能。
为什么要将“[object HTMLElement]”设置为data-number值？ (selector[i].dataset.number = index;)?

标签： javascript html css-selectors

【解决方案1】：

查看之前的答案HERE。

它使用

var i = 0;
while( (child = child.previousSibling) != null ) 
  i++;
//at the end i will contain the index.

【讨论】：

【解决方案2】：

当您说“数字”时，您是指 1、2 等还是“一”、“二”等？

如果是 1、2 等，那么数字就是 i+1...

如果是“一”、“二”等，那么你需要获取元素内的文本，然后可能使用正则表达式来解析它并获取你想要的值。

【讨论】：

那么i+1就是你想要的。
@Sake Salverda：只有当您的 getElementsByClassName() 返回的整个元素集包含在同一个父元素下并且没有其他可能干扰 :nth-child() 的子元素时，这才会“正常工作” .但是，如果您始终可以依赖该假设，那么i+1 确实就足够了。

【解决方案3】：

仅当所有匹配该类名称的元素是同一父元素的唯一元素子元素且没有其他元素可能干扰 :nth-child() 时，简单地线性递增索引才会起作用，如图所示完全在给定的标记中。请参阅this answer，了解其他元素如何干扰的说明。另请查看:nth-child() 上的Selectors spec。

实现这一点的一种更简单的方法是遍历每个元素的父节点的子节点，为作为元素节点的每个子节点递增一个计数器（因为:nth-child() 只计算元素节点）：

var selector = document.getElementsByClassName('hardware');

for (var i = 0; i < selector.length; i++) {
    var element = selector[i];
    var child = element.parentNode.firstChild;
    var index = 0;

    while (true) {
        if (child.nodeType === Node.ELEMENT_NODE) {
            index++;
        }

        if (child === element || !child.nextSibling) {
            break;
        }

        child = child.nextSibling;
    }

    element.dataset.number = index;
}

JSFiddle demo

请注意，这将应用正确的索引无论给定元素在 DOM 中的什么位置：

如果特定的section.hardware 元素是不同section 的第一个也是唯一的子元素，则会为其分配正确的索引1。

【讨论】：

【解决方案4】：

我将根据以下假设回答问题：

您的hardware 分类元素都是同级元素
您对第 n 个孩子而不是第 n 个孩子 + 1 感兴趣
它们可以与其他元素混合使用：

<body>
    <section class="hardware">some text, nth-child is zero</section>
    <section class="software"></section>
    <section class="hardware">some text, nth-child is two</section>
</body>

（我做出这些假设，因为这是我面临的问题，认为它可能有用）

所以主要区别在于，我不是查询属于给定类的元素，而是获取body 的（直接）子级，并过滤它们。

Array.from(document.body.children)
  .map((element, index) => ({element, index}))
  .filter(({element}) => element.classList.contains('hardware'))

生成的数组将如下所示：

[
  {element: section.hardware, index: 0}
  {element: section.hardware, index: 2}
]

【讨论】：

"你对第 n 个孩子感兴趣，而不是第 n 个孩子 + 1" 但是第 n 个孩子是 1-indexed...

【解决方案5】：

您可以在空格处拆分文本，从每个拆分数组中获取最后一个单词：

var hards = document.getElementsByClassName('hardware');
for (var i=0; i < hards.length; i++) {
    var hardText = hards[i].innerText || hard[i].textContent;
    var hardList = hardText.split(' ');
    var hardLast = hardList[hardList.length - 1];
    alert(hardLast);
}

我正在使用 ||这里是因为Firefox不支持innerText，而IE不支持textContent。

如果元素仅包含文本，则可以使用 innerHTML 代替 innerText/textContent。

【讨论】：