How to get the child node index in JavaScript?
The task is to get the index of child elements among other children. Here are a few techniques discussed.
Approach 1:
- Select the child element of the parent element.
- Select the parent by .parentNode property.
- Use Array.prototype.indexOf.call(Children_of_parent, current_child) to get the index.
Example 1: This example using the approach discussed above.
html
< style >
.parent {
background: green;
color: white;
}
#child1 {
background: blue;
color: white;
margin: 10px;
}
#child2 {
background: red;
color: white;
margin: 10px;
}
</ style >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< p id = "GFG_UP" >
</ p >
< div class = "parent" id = "parent" >
Parent
< div id = "child1" >
Child1
</ div >
< div id = "child2" >
Child2
</ div >
</ div >
< br >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML =
"Click on the button get the index of child element.";
function GFG_Fun() {
var child = document.getElementById('child2');
var parent = child.parentNode;
down.innerHTML =
"The index of element with id = 'child2' is = "
+ Array.prototype.indexOf.call(parent.children, child);
}
</ script >
|
Output:
How to get the child node index in JavaScript?
Approach 2:
- Select the child element of the parent element.
- First, select the parent and then select all children of the parent element.
- make an array of children and use the indexOf() method to get the index.
Example 2: This example uses the approach discussed above.
html
< style >
.parent {
background: green;
color: white;
}
#child1 {
background: blue;
color: white;
margin: 10px;
}
#child2 {
background: red;
color: white;
margin: 10px;
}
</ style >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< p id = "GFG_UP" >
</ p >
< div class = "parent" id = "parent" >
Parent
< div id = "child1" >
Child1
</ div >
< div id = "child2" >
Child2
</ div >
</ div >
< br >
< button onclick = "GFG_Fun()" >
click here
</ button >
< p id = "GFG_DOWN" >
</ p >
< script >
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML =
"Click on the button get the index of child element.";
function GFG_Fun() {
var child = document.getElementById('child2');
down.innerHTML = "The index of element with id = 'child2' is = "
+ Array.from(child.parentNode.children).indexOf(child);
}
</ script >
|
Output:
How to get the child node index in JavaScript?
Last Updated :
23 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...