admin管理员组

文章数量:1202597

I have the following HTML page:

<html>
    <head>
        <script type="text/javascript" src="JavaScript/Menu.js"></script>
    </head>
    <body>
        <ul>
            <li><a onclick="GetIndex(this)">One</a></li>
            <li><a onclick="GetIndex(this)">Two</a></li>
            <li><a onclick="GetIndex(this)">Three</a></li>
            <li><a onclick="GetIndex(this)">Four</a></li>
        </ul>
    </body>
</html>

And the Menu.js javascript: 

function GetIndex(sender)
{   
    var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
    var aElementsLength = aElements.length;

    var index;
    for (var i = 0; i < aElementsLength; i++)
    {
        if (aElements[i] == sender) //this condition is never true
        {
            index = i;
            return index;
        }
    }
}

Why is the commented condition never met? How do I compare if the two HTML elements are equal in Javascript? Thanks for all the help.

I have the following HTML page:

<html>
    <head>
        <script type="text/javascript" src="JavaScript/Menu.js"></script>
    </head>
    <body>
        <ul>
            <li><a onclick="GetIndex(this)">One</a></li>
            <li><a onclick="GetIndex(this)">Two</a></li>
            <li><a onclick="GetIndex(this)">Three</a></li>
            <li><a onclick="GetIndex(this)">Four</a></li>
        </ul>
    </body>
</html>

And the Menu.js javascript: 

function GetIndex(sender)
{   
    var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
    var aElementsLength = aElements.length;

    var index;
    for (var i = 0; i < aElementsLength; i++)
    {
        if (aElements[i] == sender) //this condition is never true
        {
            index = i;
            return index;
        }
    }
}

Why is the commented condition never met? How do I compare if the two HTML elements are equal in Javascript? Thanks for all the help.

  • javascript
  • dom
Share Improve this question asked Oct 27, 2010 at 11:20 BorisBoris 10.2k35 gold badges112 silver badges148 bronze badges 6
  • Not to be mistaken, the main goal here is to get that bloody index. However, learning how to make the disputed condition return true will solve this and many other dilemmas. – Boris Commented Oct 27, 2010 at 11:26
  • 1 Your code works just fine for me in IE and Chrome, assuming you modify it slightly to do something with index inside the condition, instead of just returning it. jsfiddle.net/AndyE/BcSL7 – Andy E Commented Oct 27, 2010 at 11:40
  • @Andy E: I deleted the return index; line and added alert('Index: ' + index); to the end of the function and it results in a message "Index: unidentified". :( – Boris Commented Oct 27, 2010 at 11:44
  • wow it works now! what the hell... could it be that my page or javascript was cached? – Boris Commented Oct 27, 2010 at 11:51
  • 1 whoever wants to write "Your code is correct" in the answer will get points for providing the right answer :) – Boris Commented Oct 27, 2010 at 11:52
 |  Show 1 more comment

6 Answers 6

Reset to default 11

"Your code is correct"

Old Post, but here is a quick function to do this:

function nodeIndex(el) {
    var i=0;
    while(el.previousElementSibling ) {
        el=el.previousElementSibling;
        i++;
    }
    return i;
}

This should work with an element reference as the parameter. It basically just returns the number of previous siblings.

try to use:

if (aElements[i] === sender)

instead of 

if (aElements[i] == sender)

The modern way to find index of element

[...el.parentNode.children].indexOf(el)

Are you sure GetIndex function gets executed on click event on anchor tag?

Try by giving href attribute to anchor tag. You can write either 

<a href="#" onclick="GetIndex(this)">One</a>

or 

<a href="javascript:void(0)" onclick="GetIndex(this)">One</a>

here is the working example http://jsfiddle.net/QfRSb/

Jquery can help using prevAll()

$(document).on("click","li",function(){
 var index=$(this).prevAll();
 alert(index);
});

本文标签： domGet list item index in HTML ul list using JavascriptStack Overflow

版权声明：本文标题：dom - Get list item index in HTML ul list using Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738651248a2104883.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。