Подсчитайте <a>элементов и отобразите строку в элементе Jquery - PullRequest
Новая
       25

Подсчитайте <a>элементов и отобразите строку в элементе Jquery

0 голосов
/ 05 ноября 2018

У меня есть меню панели навигации, и я хочу сосчитать ссылки <a> в каждой и отобразить это число рядом с родительской ссылкой в ​​элементе панели навигации.

Например, я хотел добиться этого: enter image description here

Мне нужно сделать это для каждого пункта меню. Так что я не уверен, как включить это в код, так как я новичок в 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>

Надеюсь, это ясно и понятно? Большое спасибо за любую помощь. Мои извинения, если на это был дан ответ, похоже ... Я искал, но не мог точно найти, как этого добиться. По крайней мере, в моих поисковых словах.

1 Ответ

0 голосов
/ 05 ноября 2018

Это может помочь вам. Не существует прямого способа получить счет непосредственно в соответствии с вашими потребностями, но это может быть достигнуто за пару шагов, как показано ниже. Обратите внимание, что это пример кода: 

<!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)
});

});
...