javascript - 获取主菜单项列表

Question

我面临这样一种情况，我需要从主菜单中获取所有元素，这样我就可以在没有它的不同地方使用相同的菜单，我只能访问前端、js 表和 css。

这是菜单 html:导航结构是这样的(body.home header nav)

  <ul class="menu-principal">
        <li class="text1 "><a href="#" class="text1" target="">text1</a></li>   
        <li class="text2 "><a href="#" class="text2" target="">text2</a></li>       
        <li class="text3 "><a href="#" class="text3" target="">text3</a></li>       
        <li class="text4 "><a href="#" class="text4" target="">text4</a></li>                       
    </ul>
<script>
     $(".menu-principal > ul > li > a").each(function () {
        var children = $(this).next('ul').children();
        alert(children.length);
     });

 /*****************************/

  $("body header nav .menu-principal").each(function() {
      var children = $(this).children();
      alert(children.length);
   });

  /******************/
  $(".menu-principal").each(function() {
      var children = $(this).children();
      alert(children.length);
   }); 
</script>

我所需要的只是能够获取菜单列表，因为当选择语言时菜单是多种语言的，因此获取也应该获取所选语言的列表。

以上是我尝试过但并不走运的3次尝试。

Answer 1

我修改了您的选择器。它能够访问 anchor 标记的文本。

$(".menu-principal > li > a").each(function () {
    console.log($(this).text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu-principal">
        <li class="text1 "><a href="#" class="text1" target="">text1</a></li>
        <li class="text2 "><a href="#" class="text2" target="">text2</a></li>
        <li class="text3 "><a href="#" class="text3" target="">text3</a></li>
        <li class="text4 "><a href="#" class="text4" target="">text4</a></li>
</ul>