javascript 如何在js中获取子元素的第n个编号

0pizxfdo  于 2023-02-02  发布在  Java
关注(0)|答案(5)|浏览(266)

我有这个html:

<div id="helo">
  <span id="hjhn">sample text</span>
  <span id="uhed">melaps xtet</span>
  <span id="kdhs">elpmas txet</span>
</div>

然后我需要一些东西,你告诉id,它会返回元素的编号。
例如:

helo('#hjhn'); // Output: 0
helo('#uhed'); // Output: 1
helo('#kdhs'); // Output: 2

我已经尝试了很多像3种不同的方式,但我只是不知道如何,所以这将是伟大的,你会试图帮助我!

83qze16e

83qze16e1#

你可以做这样的事。

const parent = document.querySelector("#helo");
const getChildIndex = (_id) => {
  let index = 0;
  for (const child of parent.children) {
    index++;
    if (child.id === _id){
      return index; 
    }
  }
}

console.log(getChildIndex("kdhs"))

主要目标是循环遍历子元素并将它们Map到索引号,可以通过多种方式完成。

pkwftd7m

pkwftd7m2#

是的,有很多种方法可以做到这一点。这是另一种。

function getSpanIndex(id) {
    const div = document.getElementById('helo');
    const spans = div.querySelectorAll('span');
    for (let i = 0; i < spans.length; ++i) {
        if (spans[i].id === id)
            return i;
    }
    return -1;
}
uemypmqf

uemypmqf3#

在您不知道选定元素的父元素的情况下,“跟随”功能非常灵活。

const getIndex = (id) => {
        const c = document.getElementById(id);
        const parent = c.parentNode;
        return Array.from(parent.children).findIndex((i) => i.id == id);
      };

console.log(getIndex("uhed"));

它选择一个具有给定id的元素,并遍历所选元素的父元素的子元素。
此外,可以添加if语句来检查c是否未定义,以避免在DOM中不存在具有给定id的元素时出现运行时错误。

sqyvllje

sqyvllje4#

模板字符串可以做得很好:

function test(ele) {
    const currentEle = document.querySelector(`${ele}`);
    return Array.from(currentEle.parentNode.children).findIndex(item => item === currentEle);
}
qf9go6mv

qf9go6mv5#

您可以使用querySelector函数来选择第n个子级。请参见下面的示例。

const document = document.querySelector('#helo span:nth-child(2)');
console.log(document); // 👉️ <span id="kdhs">elpmas txet</span>

注意:nth-child(2)此“2”是项目的索引。它从0开始
查看此博客了解更多详细信息-https://bobbyhadz.com/blog/javascript-get-nth-child-of-element

相关问题