0

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

<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 的兄弟？我的想法是找到被点击元素的兄弟姐妹的数量，我可以找出它的父母拥有的孩子的总数。所以现在我可以通过从其父级的总子级中减去没有兄弟级来找到单击元素的索引。

请告诉我是否有更好的选择来获得这个。

4

2 回答 2

2

如果您想知道子元素相对于其兄弟元素的索引，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());
    }
});

实例| 资源

请注意，仅考虑了元素，而不考虑可能存在的其他类型的节点（特别是文本节点）。这可能是您在大约 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
    }
});

现场复制| 资源

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

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

...和

var element =  e.target;

...target当按下按钮时，它将是鼠标下方的最上面的元素。

于 2012-06-14T11:19:14.027 回答
1

首先，您应该使用click事件而不是mousedown. 然后，您不应该使用on<event>-property 而是使用正确的方法来添加侦听器，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);
        }

此代码打印element. 这似乎不是你想要的。你要数它之前的兄弟姐妹，对吧？那就用.previousSibling吧。

此外，它还包括文本节点，记录undefined它们的nodeName. 为了解决这个问题，您可以使用[previous|next]ElementSibling.

...找出其父母拥有的孩子总数

哦，这是一个更容易的任务：

element.parentNode.children.length;
// or even
element.parentNode.childElementCount;
// to include text nodes:
element.parentNode.childNodes.length;
于 2012-06-14T11:30:40.400 回答