jquery - 计数项目并在元素 Jquery 中显示字符串
问题描述
我有一个导航栏菜单,我想计算<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>
我希望这是清晰易懂的?非常感谢您的帮助。如果这得到了类似的回答,我深表歉意....我确实搜索过,但找不到确切的实现方法。至少在我的搜索词中。
解决方案
这可能对您有所帮助。没有直接的方法可以根据您的需要直接获取计数,但可以通过如下几个步骤来实现,请注意,这是示例代码:
<!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)
});
});
推荐阅读
- php - 使用 Curl php laravel 上传文件
- c++ - CUDA NPP min-max 返回错误的输出
- angular - Angular - 无法将字节数组显示为图像
- mysql - 使用 RefreshDatabase 特征时如何跳过某些迁移文件
- java - 即使在 Java 中类型擦除之后,JSON 如何映射到 List<>
- reactjs - useState 返回空数组
- c++ - 如何正确地将颜色顶部的纹理与透明度混合?
- c - 将文件名作为参数传递给 fopen() 不起作用
- javascript - 如何动态设置图形折线图?
- docker - 弹性容器服务上的“sh: 1: ./binary: Permission denied”