Forum Moderators: open
<ul>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
</ul>
I want thisindex to return the index of the element. For example, the first element would return '0', the second element '1', etc.
I thought I had it with indexOf, but then I remembered that's for finding the position of a character in a string.
The code I've been playing with (doesn't work):
<script>
function thisindex(elm){
var the_li = elm;
var the_ul = elm.parentNode;
var the_index = the_ul.indexOf(the_li);
alert(the_index);
}
</script>
Is there a property that I can access that just knows this information? Otherwise, how can I get the index of the particular element within it's parentNode?
index
<ul>
<li onmouseover="alert(this.index);">some text</li>
</ul>
I get 'undefined' in both Firefox and in Safari.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
</head>
<body>
<script>
function thisindex(elm)
{
var the_li = elm;
var the_ul = elm.parentNode;
var li_list = the_ul.childNodes;var count = 0; // Tracks the index of LI nodes
// Step through all the child nodes of the UL
for( var i = 0; i < li_list.length; i++ )
{
var node = li_list.item(i);
if( node )
{
// Check to see if the node is a LI
if( node.nodeName == "LI" )
{
// Increment the count of LI nodes
count++;
// Check to see if this node is the one passed in
if( the_li == node )
{
// If so, alert the current count
alert(count);
}
}
}
}
}
</script>
<ul>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
<li onmouseover="thisindex(this);">some text</li>
</ul>
</body>
</html>
Hope that helps.
Along the same wavelength as Fotiman, I had this:
<script type="text/javascript">
<!--
function thisindex(obj){
//get parent of obj
parentObj=obj.parentNode
//get all li elements of parentObj
litems=parentObj.getElementsByTagName('li')
//cycle through litems to find obj
for (i=0;i<litems.length;i++){
if (litems.item(i)==obj){
alert(i)
}
}
}
//-->
</script>
</head>
<body>
<ul id="myUL">
<li id='li1' onmouseover="thisindex(this);">some text</li>
<li id='li2' onmouseover="thisindex(this);">some text</li>
<li id='li3' onmouseover="thisindex(this);">some text</li>
<li id='li4' onmouseover="thisindex(this);">some text</li>
</ul>
</body>
ajkimoto
function thisindex(elm)
{
var nodes = elm.parentNode.childNodes, node;
var i = count = 0;
while( (node=nodes.item(i++)) && node!=elm )
if( node.nodeType==1 ) count++;
alert(count);
}
getElementsByTagName returns all descendants, not just childNodes.
It is always better to design for all eventualities.
You could still use getElementsByTagName() but with a while loop instead of a for loop, with a test for incrementing i like:
i=(litems.item(i).parentNode==parentObj?i+1:i)
ajkimoto
