javascript this.nextSibling 不工作

this.nextSibling not working

提问by moroccan_dev

I expect the following code to alert "out"

我希望以下代码能够提醒“退出”

<input type=text onfocus="alert(this.nextSibling.id)" />
<output id="out">this is output</output>

But it alerts undefined WHY?

但它警告未定义为什么？

采纳答案by undefined

nextSiblingselects the very next sibling node of the element. The very next node can also be a textNodewhich doesn't have an idproperty, hence you get the undefinedvalue. As the other answer suggests you could use the nextElementSiblingproperty which refers to the next sibling node that has nodeTypeof 1(i.e. an Element object) or remove the hidden characters between the elements.

nextSibling选择元素的下一个兄弟节点。下一个节点也可以是textNode没有id属性的 a，因此您可以获得该undefined值。正如另一个答案所暗示的那样，您可以使用nextElementSibling引用具有nodeTypeof 1（即 Element 对象）的下一个同级节点的属性，或者删除元素之间的隐藏字符。

Note that IE8 doesn't support the nextElementSiblingproperty.

请注意，IE8 不支持该nextElementSibling属性。

回答by Johan Karlsson

Try this:

试试这个：

alert(this.nextElementSibling.id);

NOTE:The nextSiblingproperty returns the node immediately following the specified node, in the same tree level.

注意：该nextSibling属性返回紧跟在同一树级别中指定节点之后的节点。

The nextElementSiblingread-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.

该nextElementSibling只读属性返回指定一个在其父的孩子列表，或者为null如果指定的元素是最后一个在列表中紧随其后的元素。

回答by Bharata

Why you have this problem

为什么你有这个问题

nextSiblingselects the next sibling node of the element. In your case you have a text node as a next node because you have a new line between your element nodes. Each text node between element nodes will be selected as next node and this nodes don't have an idproperty.

nextSibling选择元素的下一个兄弟节点。在您的情况下，您有一个文本节点作为下一个节点，因为您的元素节点之间有一条新线。元素节点之间的每个文本节点都将被选为下一个节点，并且该节点没有id属性。

To prevent this we can use 2 ways:

为了防止这种情况，我们可以使用两种方法：

Solution 1:

解决方案1：

We delete a new lines, all of whitespaces, comment nodesor other text nodesand then we can use nextSibling:

我们删除新行、所有空格、注释节点或其他文本节点，然后我们可以使用nextSibling：

<input type="button" value="get next sibling value" onclick="console.log(this.nextSibling.value)"><input type="text" value="txt 1">

Solution 2:

解决方案2：

We use instead of nextSiblingthe nextElementSiblingproperty:

我们使用的替代nextSibling的nextElementSibling特性：

<input type="button" value="get next sibling value" onclick="console.log(this.nextElementSibling.value)">
<input type="text" value="txt 1">

The nextElementSiblingproperty returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.

该nextElementSibling属性返回紧跟在其父子项列表中指定元素之后的元素，如果指定元素是列表中的最后一个元素，则返回 null。

In the case if some browser like IE8 doesn't support the nextElementSiblingproperty we can use a polyfill (it should be placed before your code):

如果某些浏览器如 IE8 不支持该nextElementSibling属性，我们可以使用 polyfill（它应该放在您的代码之前）：

if(!('nextElementSibling' in document.documentElement))
{
    Object.defineProperty(Element.prototype, 'nextElementSibling',
    {
        get: function()
        {
            var e = this.nextSibling;
            while (e && e.nodeType !== 1)
                e = e.nextSibling;

            return e;
        }
    });
}

Relevant links:

相关链接：

• Node.nextSibling

• NonDocumentTypeChildNode.nextElementSibling

• Node.nextSibling

• NonDocumentTypeChildNode.nextElementSibling

回答by xameeramir

Assuming that you can use jQuery

假设你可以使用 jQuery

Note that this.nextSiblingmight not work in IE specifically

请注意，这this.nextSibling可能不适用于 IE

The jQueryalternative for this.nextSiblingis $(this).next()

的jQuery替代方案this.nextSibling是$(this).next()