如何访问<nav>的子元素

时间:2017-05-11 12:55:37

标签: angularjs

我想访问li的子nav个元素。但它的显示不定。

  <nav>
                <ul class="info-section">
                    <li><a href="#" data-target="basicInfo">Basic Information</a></li>
                    <li><a href="#" data-target="extInfo">Extended Information</a></li>
                    <li><a href="#" data-target="loanSize">Loan Size / LVR</a></li>
                    <li><a href="#" data-target="loanFees">Loan Fees</a></li>
                    <li><a href="#" data-target="services">Services</a></li>
                </ul>
            </nav>

我在cutome指令中使用bello代码

     nav = angular.element(document.querySelector(".info-section"));

它返回的dom元素。但如果我写下波纹线。它的印刷品undefine

  console.log(nav.children[0].classList);

3 个答案:

答案 0 :(得分:1)

你可以这样使用。没有直接的方法来获取元素

的子元素
nav = angular.element(document.querySelector(".info-section"));
nav[0].getElementsByTagName('li')

答案 1 :(得分:1)

访问元素的0位置

nav[0].children[0].classList

演示

angular.module("app",[])
.controller("ctrl",function($scope){

var nav = angular.element(document.querySelector(".info-section"));
console.log(nav[0].children[0].classList)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <nav>
                <ul class="info-section">
                    <li><a href="#" data-target="basicInfo">Basic Information</a></li>
                    <li><a href="#" data-target="extInfo">Extended Information</a></li>
                    <li><a href="#" data-target="loanSize">Loan Size / LVR</a></li>
                    <li><a href="#" data-target="loanFees">Loan Fees</a></li>
                    <li><a href="#" data-target="services">Services</a></li>
                </ul>
            </nav>
</div>

答案 2 :(得分:0)

我对角度知之甚少,但你可以试试这个

&#13;
&#13;
var nav = document.getElementsByTagName("nav");
var ulWithInfoSection = nav[0].getElementsByClassName("info-section")[0];
console.log(ulWithInfoSection.getElementsByTagName("li"));
&#13;
 <nav>
                <ul class="info-section">
                    <li><a href="#" data-target="basicInfo">Basic Information</a></li>
                    <li><a href="#" data-target="extInfo">Extended Information</a></li>
                    <li><a href="#" data-target="loanSize">Loan Size / LVR</a></li>
                    <li><a href="#" data-target="loanFees">Loan Fees</a></li>
                    <li><a href="#" data-target="services">Services</a></li>
                </ul>
            </nav>
&#13;
&#13;
&#13;