如何在JavaScript中访问父元素的子元素

Question

Naturally I tried:

function show() {
   this.parent.childNodes[1].childNodes[1].visibility = 'hidden';
}

But debugger says that parent has no property children. What I'm doing wrong guys? And I can't use jQuery, I'm on hosted webserver.

Answer 1

You need to use parentNode for raw javascript, .parent() is jquery. So in your case:

function show() {
   this.parentNode.childNodes[1].childNodes[1].visibility = 'hidden';
}

Answer 2

Well, I got hasty with this one. Parent was not node element, so it had no children. And 'this' had no parentNode property. What works is:

function show(node) {
    node.parentNode.childNodes[1].childNodes[1].style.visibility = 'hidden';
}

and

<a class="hider" onclick="show(this)">Test</a>

Naturally to other people indexes in childNodes list are irrelevant. But for me they work, but certainly it is not cleaver on nice solution.

Answer 3

Your 'this' seems to be the global scope. So 'this' points to window, which has no parent node.