javascript - 如何使用javascript获取html元素的子索引

Question

我正在尝试获取其父级的子级索引。例如:-

<div>
    <table>
        <tr id="rahul">
            <td> Hi this is ABC </td>
            <td> Hi this is XYZ </td>
        </tr>
    </table>
</div>

我的java脚本代码是:-

<script>
    $(document).ready(function() {
        document.onmousedown = mouseDown;
        function mouseDown(e) {
            var element =  document.elementFromPoint(e.clientX,e.clientY);
            console.log("Clicked element is:" + element.tagName);
            var i=1;
            while (element.nextSibling != null) {
                element = element.nextSibling;
                console.log('Sibling No:' + (i++) + " " + element.tagName);
            }
        }
    });
</script>

当我点击“嗨，这是 ABC”时，它应该打印

Sibling No.1 TD

但实际上它正在打印

Clicked element is:TD jsoupTest.html:10
Sibling No:1 undefined jsoupTest.html:14
Sibling No:2 TD jsoupTest.html:14
Sibling No:3 undefined 

令人怀疑的是，为什么这会打印为 TD 的同级未定义？我的想法是找到被单击元素的 sibling 的数量，并且我可以找出其父元素拥有的 child 的总数。所以现在我可以通过从其父元素的总子元素中减去兄弟元素的数量来找到被单击元素的索引。

请告诉我是否有更好的替代方案。

Answer 1

如果您想知道子元素相对于其兄弟元素的索引，jQuery可以通过index为您做到这一点(如果您想考虑非元素节点，请参阅下文):

$(document).ready(function() {
    document.onmousedown = mouseDown;
    function mouseDown(e) {
        var element =  document.elementFromPoint(e.clientX,e.clientY);
        console.log("Clicked element is:" + element.tagName);
        console.log("Index: " + $(element).index());
    }
});

Live example | source

请注意，仅考虑了元素，而不考虑可能存在的其他类型的节点(特别是 text nodes )。大约 90% 的情况下，这就是您想要的，甚至可能更多。 :-) 如果您确实想考虑其他节点类型，而不仅仅是元素，请使用 $.inArray(element, $(element).parent().contents()) 而不是 $ (element).index()，例如:

$(document).ready(function() {
    document.onmousedown = mouseDown;
    function mouseDown(e) {
        var element =  document.elementFromPoint(e.clientX,e.clientY);
        console.log("Clicked element is:" + element.tagName);
        console.log("Index: " + $.inArray(element, $(element).parent().contents()));
        // ^--- this is the only line that changed
    }
});

Live copy | source

<小时/>

旁注:我相当确定您可以更换线路

var element =  document.elementFromPoint(e.clientX,e.clientY);

...与

var element =  e.target;

...as target 将成为按下按钮时鼠标下方最上面的元素。