Question

我无法想象如何遍历DOM，从<span class = "open-menu-link">开始，我想要到达<ul class="sub-menu">。

脚本

<script> $('.open-menu-link').click(function(e){
                                      alert(e.currentTarget);
                                    });
</script>

返回一个Object HTMLSpanElement，但如果我编码e.currentTarget.parentNode;，则返回http://localhost/mysite/home.php。做e.currentTarget.children;我得到了对象HTMLCollection，但是如果我尝试e.currentTarget.children[1]我得到了未定义的...那么如何才能到达<ul class="sub-menu">？摘录如下：

<ul class="menu">
    <li><a href="#work">Work</a></li>
    <li class="menu-item-has-children"><a href="#about">Haschildren <span class = "open-menu-link">+</span></a>
            <ul class="sub-menu">
                <li><a href="#link1">Child 1</a></li>
                <li><a href="#link2">Child 2</a></li>
                <li><a href="#link3">Child 3</a></li>
            </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

Answer 1

代码中的<span class = "open-menu-link">只有一个子节点，即文本节点+这就是e.currentTarget.children[1]未定义的原因。进入dom遍历，您应该从节点<li class="menu-item-has-children">开始。那就是我可以从你的问题中推断出来的。

Answer 2

$(function() {
$('.open-menu-link').click(function(e){ 
	console.log(e.target.parentNode.nextElementSibling);
	console.log(e.target.parentNode.parentNode.children[1]);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li><a href="#work">Work</a></li>
    <li class="menu-item-has-children">
        <a href="#about">Haschildren <span class="open-menu-link">+</span></a>
        <ul class="sub-menu">
            <li><a href="#link1">Child 1</a></li>
            <li><a href="#link2">Child 2</a></li>
            <li><a href="#link3">Child 3</a></li>
        </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

有几种选择：

$('.open-menu-link').click(function(e){ 
    console.log(e.target.parentNode.nextElementSibling);
    console.log(e.target.parentNode.parentNode.children[1]);
});

Answer 3

您需要使用preventDefault()，因为您的课程是一个链接。通过点击，它会将您重定向到链接。

＆＃13;

$('.open-menu-link').click(function(e) {
  console.log($(this).parent().next())
  e.preventDefault()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="#work">Work</a>
  </li>
  <li class="menu-item-has-children">
    <a href="#about">Haschildren <span class = "open-menu-link">+</span></a>
    <ul class="sub-menu">
      <li><a href="#link1">Child 1</a>
      </li>
      <li><a href="#link2">Child 2</a>
      </li>
      <li><a href="#link3">Child 3</a>
      </li>
    </ul>
  </li>
  <li><a href="#careers">Careers</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
</ul>

＆＃13;

DOM遍历从锚点内的span元素到列表

3 个答案: