Question

I have a navbar menu and I want to count the <a> links in each and display that number beside the parent link in the navbar item.

For instance I wanted to achieve this:

我需要对“每个”菜单项执行此操作。因此，由于我是JS newb，所以我不确定如何将其合并到代码中。

我设法对物品进行计数，但是它将显示所有物品，我需要分别为每个物品计数。

$('.row div').children('a').length);

接下来我需要在父项旁边显示“每个”数字。代码中的层次结构是这样的：

<div id="navbar-main" class="navbar-collapse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle">
                    <span class="hide-overflow dropdown-label">
                        MENU ITEM PARENT
                        <i class="fa fa-chevron-down"></i>
                    </span>
                </a>
                <ul role="menu" class="dropdown-menu">
                    <li>
                        <div class="y-content">
                            <div class="row">
                                <div class="col">
                                    <a href="link1" class="">
                                        <div class="sub-menu-container">
                                            <span class="text-bold text-primary">Li Link</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul role="menu" class="dropdown-menu">
                    <li>
                        <div class="y-content">
                            <div class="row">
                                <div class="col">
                                    <a href="link2" class="">
                                        <div class="sub-menu-container">
                                            <span class="text-bold text-primary">Li Link</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我希望这是清楚可理解的？非常感谢您的帮助。如果已经相似地回答了我，我深表歉意。...我确实进行了搜索，但找不到确切的实现方法。至少在我的搜索字词中。

Answer 1

这可能对您有帮助。没有直接方法可以直接根据您的需要获得计数，但是可以通过以下几个步骤来实现，请注意，这是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
    <!-- Dropdown 2-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link 2
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1 2</a>
        <a class="dropdown-item" href="#">Link 2 2</a>

      </div>
    </li>
  </ul>
</nav>
<br>

<div class="container">
  <h3>Navbar With Dropdown</h3>
 <div id="cnt1"> test1</div>
 <div id="cnt2"> test 2</div>
</div>
<script>
$(document).ready(function(){
   // alert($(".dropdown-menu").length)
    var obj = $(".dropdown-menu");
   // alert($( obj ).find( "a" ).length);
    $.each( obj, function( key, value ) {
  //alert( "#cnt" +(key+1) );
  $("#cnt" +(key+1)).html($( value ).find( "a" ).length)
});

});
</script>
</body>
</html>

仔细查看下面的代码：在这里，我们使用css class获取主菜单，然后在主菜单下获取菜单项并在div中进行更新

$(document).ready(function(){
   // alert($(".dropdown-menu").length)
    var obj = $(".dropdown-menu");
   // alert($( obj ).find( "a" ).length);
    $.each( obj, function( key, value ) {
  //alert( "#cnt" +(key+1) );
  $("#cnt" +(key+1)).html($( value ).find( "a" ).length)
});

});

计数<a> items and display the string in an element Jquery

1 个答案: