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

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

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;

...当按下按钮时，target将成为鼠标下方的最顶层元素。

Answer 2

首先，您应该使用click事件而不是mousedown。然后，你不应该使用on<event> - 属性，而是添加一个监听器的正确方法，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;

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

2 个答案: