Question

我正在尝试获取父元素中的子索引。我按照答案here，但结果是无限循环。

到目前为止我的代码：

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span = e.target;
    var spanSiblings = 0;

    while((span.previousElementSibling) != null ) {
        spanSiblings++;
    }

    console.log(spanSiblings);
});

目的是在用户点击第一个跨度时输出0，因为它是“spans”id中的第一个孩子：

<div id="spans">
    <span>This is span #1</span>
    <span>This is span #2</span>
    <span>This is span #3</span>
</div>

任何帮助都将不胜感激。

Answer 1

从jQuery借用一点，用$.inArray函数检查index中的元素位置，你可以做到

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span  = e.target;
    var arr   = [].slice.call(spans);
    var index = arr.indexOf( span );

    console.log( index );
});

FIDDLE

Answer 2

由于您没有更改循环中的span变量，因此条件将始终相同。如果将之前的兄弟分配给变量，那么它可以工作：

＆＃13;

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span = e.target;
    var spanSiblings = 0;

    while((span = span.previousElementSibling) != null ) {
        spanSiblings++;
    }

    console.log(spanSiblings);
});

＆＃13;

<div id="spans">
    <span>This is span #1</span>
    <span>This is span #2</span>
    <span>This is span #3</span>
</div>

＆＃13;

Answer 3

您必须修改while循环条件。您没有任何条件来终止while循环。将while循环代码更改为

The controller will watch for the server to redirect the web view to this URI,
but this URI will not be loaded, so it need not be for any actual web page.

无法在点击儿童时获取儿童的索引

3 个答案: