计算 <a> 项并在元素 Jquery 中显示字符串答案

【问题标题】：Count <a> items and display the string in an element Jquery计算 <a> 项并在元素 Jquery 中显示字符串
【发布时间】：2018-11-05 07:56:19
【问题描述】：

我有一个导航栏菜单，我想计算每个链接中的 <a> 链接，并在导航栏项目的父链接旁边显示该数字。

例如，我想实现这一点：

我需要为“每个”菜单项执行此操作。所以我不确定如何将它合并到代码中，因为我是一个 JS 新手。

我设法计算了项目，但它会显示所有项目，我需要分别计算每个项目的数量。

$('.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>

我希望这是清晰易懂的？非常感谢您的帮助。如果这得到了类似的回答，我深表歉意....我确实搜索过，但找不到确切的实现方法。至少在我的搜索词中。

【问题讨论】：

类别在哪里打印（如男性、女性）？我无法在您的代码中找到它。而且您的输入 HTML 中有很多未关闭的标签
感谢您的回复。哦，我复制了一些源代码，不得不编辑掉一些内容，所以我可能会不小心删除了一些代码。顺便说一句，男装和女装只是我从为网站做一些图形设计的人那里抓取的打印屏幕，所以它不是我正在做的网站。

标签： jquery count items

【解决方案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)
});

});

【讨论】：

非常感谢，我会把它放到 Codepen 或 Fiddle 里看看能不能实现。