在纯 JavaScript 中获取元素的第 n 个子编号
[英]Get an element's nth-child number in pure JavaScript
问题描述
我正在为我的网站制作一个 function，我在其中设置了一个包含该元素的第 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 中是否可行？
6 个解决方案
解决方案1
5 2014-06-26 17:14:32
在这里查看以前的答案。
它用
var i = 0;
while( (child = child.previousSibling) != null )
i++;
//at the end i will contain the index.
解决方案2
4 已采纳 2014-06-26 17:11:52
当你说“数字”时，你的意思是1,2等，还是“一个”，“两个”等？
如果是1,2等，那么数字就是i + 1 ......
如果“one”，“two”等，那么你需要获取元素内的文本，然后可能使用Regexp来解析它并获得你想要的值。
解决方案3
2 2014-06-26 17:56:12
简单地线性递增索引只有在匹配该类名的所有元素都是同一父级的唯一子元素时才有效，没有其他元素可以干扰:nth-child() ，如给定标记中所示。 请参阅此答案 ，了解其他元素可能会如何干扰。 还要查看选择器规范 :nth-child() 。
实现这一目标的一种方法更加简单，就是遍历每个元素父节点的子节点，为每个作为元素节点的子节点递增一个计数器（因为: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;
}
请注意， 无论给定元素在DOM中的位置如何 ，这都将应用正确的索引：
如果特定的
section.hardware元素是不同section的第一个也是唯一的子section.hardware，则会为其指定正确的索引1。如果
.hardware元素是.hardware元素的第二个子元素，即使它是唯一具有该类的子元素（即它跟随一个没有该类的其他元素），它也将被赋予正确的索引2。
解决方案4
2 2018-03-22 05:57:18
我将用以下假设回答这些问题：
- 您的
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}
]
解决方案5
0 2014-06-26 17:15:41
您可以在空格处拆分文本，从每个拆分数组中获取最后一个单词 ：
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 。
解决方案6
0 2022-08-24 13:11:02
[].slice.call(elem.parentElement.childNodes).indexOf(elem)
Javascript nth-child不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.