Question

我正面临一个场景，我需要从主菜单中获取所有项目，所以我可以在没有它的不同地方使用相同的菜单，我只能访问前端，js表和css。

这是菜单html：nav以这种方式构建（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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这就是你要找的东西：

// .menu-principal is the <ul> so you don't want to look for a <ul>
// that is a child of it.
$(".menu-principal > li > a").each(function () {
  console.log(this.href);
});

<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="http://cnn.com" class="text1" target="">text1</a></li>
  <li class="text2 "><a href="http://fox.com" class="text2" target="">text2</a></li>
  <li class="text3 "><a href="http://cbs.com" class="text3" target="">text3</a></li>
  <li class="text4 "><a href="http://nbc.com" class="text4" target="">text4</a></li>
</ul>

Answer 3

从主菜单中获取所有项目，以便我可以在不同的菜单上使用sme菜单没有它的地方

如果您想在其他地方使用相同的菜单，可以使用clone()。只需复制元素并将其附加到别处。

＆＃13;

var menu = $('.menu-principal').clone();
$('body').append(menu);

＆＃13;

<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>

＆＃13;

获取主菜单项列表

3 个答案: