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

我正在尝试获取其父对象的子对象的索引。 例如：-

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

但实际上它是印刷品

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的兄弟打印未定义？ 我的想法是找到元素的兄弟姐妹数，我可以找到它的父元素的子元素总数。现在我可以通过从父元素的子元素总数中减去子元素的数量来找到clicked元素的索引

---

请告诉我是否有更好的方法得到这个。

< P>如果你想知道一个孩子<强> >元素< /强>相对于它的兄弟姐妹<强>元素< /强>，jQuery可以为你做这件事（如果你想考虑非元素节点，请看下）：

|

注意，这只考虑了元素，而不考虑可能存在的其他类型的节点（特别是）。这大概是您90%的时间想要的，可能更多。：-）如果您真的想考虑其他节点类型，而不仅仅是元素，请使用<代码> $.nAllement（元素，$（元素）.PARTUNE（））（<代码> >，而不是<代码> $（元素）.Idx（）<代码>，例如：

$(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
    }
});

|

---

旁注：我确信你可以更换你的线路

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

…与

var element =  e.target;

---

…<目标> <代码>将是鼠标按下按钮时的最顶层元素。

如果您想知道子<强>元素< /强>的索引与它的兄弟姐妹<强>元素< /强>有关，jQuery可以通过（如果您想考虑非元素节点进一步查看）：（

） |

注意，这只考虑了元素，而不考虑可能存在的其他类型的节点（特别是）。这大概是您90%的时间想要的，可能更多。：-）如果您真的想考虑其他节点类型，而不仅仅是元素，请使用<代码> $.nAllement（元素，$（元素）.PARTUNE（））（<代码> >，而不是<代码> $（元素）.Idx（）<代码>，例如：

$(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
    }
});

|

---

旁注：我确信你可以更换你的线路

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

…与

var element =  e.target;

---

…因为按下按钮时，

target

将是鼠标下的最上方元素。

首先，您应该使用

单击

事件，而不是

mousedown

。然后，您不应该在-属性上使用

，而应该使用适当的方式添加侦听器，jQuery（您已经加载）提供了一种简单的跨浏览器方式

接下来，不要对鼠标事件的坐标使用
document.elementFromPoint
，只需使用事件的
target
属性即可

$(document).on("click", function(e) {
     var element = e.target;
     ...
});

然后，您的循环：

        var i=1;
        while (element.nextSibling != null) {
            element = element.nextSibling;
            console.log('Sibling No:' + (i++) + " " + element.tagName);
        }

此代码打印
元素
之后的所有同级。这似乎不是你想要的。你想先数一数兄弟姐妹，对吗？然后使用
.previousSibling

此外，它还包括文本节点，为其
节点名
记录
未定义的
。要解决这个问题，可以使用
[previous | next]ElementSibling

…找出其父代的子代总数

哦，这是一项容易得多的任务：

element.parentNode.children.length;
// or even
element.parentNode.childElementCount;
// to include text nodes:
element.parentNode.childNodes.length;

首先，您应该使用
单击
事件，而不是
鼠标向下
。然后，您不应该在
-属性上使用
，而应该使用适当的方式添加侦听器，jQuery（您已经加载）提供了一种简单的跨浏览器方式

接下来，不要对鼠标事件的坐标使用
document.elementFromPoint
，只需使用事件的
target
属性即可

$(document).on("click", function(e) {
     var element = e.target;
     ...
});

然后，您的循环：

        var i=1;
        while (element.nextSibling != null) {
            element = element.nextSibling;
            console.log('Sibling No:' + (i++) + " " + element.tagName);
        }

此代码打印
元素
之后的所有同级。这似乎不是你想要的。你想先数一数兄弟姐妹，对吗？然后使用
.previousSibling

此外，它还包括文本节点，为其
节点名
记录
未定义的
。要解决这个问题，可以使用
[previous | next]ElementSibling

…找出其父代的子代总数

哦，这是一项容易得多的任务：

element.parentNode.children.length;
// or even
element.parentNode.childElementCount;
// to include text nodes:
element.parentNode.childNodes.length;

在您使用jQuery时（我是从
$（document）.ready（…）
）推断出来的），我已经在您的问题中添加了jQuery标记——因为它会显著影响答案。（例如：这是一行带jQuery，多行不带jQuery。）您得到的是
未定义的
，因为
td
元素节点之间（以及最后一个之后）有一个文本节点（包含空格字符），而文本节点没有标记名。改用
element.nodeName
，您将看到。因为在javascript中索引通常是以零为基础的，所以您最好从
var i=0
开始。在使用jQuery时（我从
$（document.ready（…）
），我已经在您的问题中添加了jQuery标记，因为它将非常显著地影响答案。（例如：这是一行带jQuery，多行不带jQuery。）您得到的是
未定义的
，因为
td
元素节点之间（以及最后一个之后）有一个文本节点（包含空格字符），而文本节点没有标记名。改用
element.nodeName
，你会看到的。因为在javascript中索引通常是零基的，所以你最好从
var i=0
$（element.index（）
开始。index（）就够了。@FelixKling你应该把它放在自己的答案中。再次感谢T.J.Crowder给你的超级棒的答案：）：
$（element）.index（）
足够了。@FelixKling你应该把它放在自己的答案中。再次感谢T.J.Crowder的超级棒的答案：）：）我现在才发现你的答案真的很酷..奇怪为什么我没有提前投票..谢谢：）我现在才发现你的答案真的很酷..奇怪为什么我没有这么做早前投票……谢谢：）