从.length()中删除特定的子对象

Question

我在手风琴菜单中使用了这个JS/JQuery代码，它在父菜单旁边添加子计数。我有另一个代码，它给一个没有直接链接的孩子一个特定的类，我用它来命名“子菜单”。下面的示例(基于WordPress菜单格式)。

如何调整我的子计数代码以排除具有“class=”特定-子“”的子程序？现在计数包括它，因为它不是到任何地方/任何地方的实际链接，所以我想将它排除在.length之外。

谢谢!

The JS

$( '.menu-item-parent > a' ).addClass( 'accordion-item' );
    
    // Get Sub-menu Item
    let $submenuCount =  $( '[id*="-menu"] > li > a' );
    
    $submenuCount.each( function() {
      
      // Find the number of items in a sub-menu.
      let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;
      
      // Add a leading zero if items is less than 10.
      if( $submenuLength < 10 ) $submenuLength = '0' + $submenuLength;
      
      // Create length into a style.
      $( this ).addClass( 'leading-zero' ).css( '--content', `'${$submenuLength}'` );
      
    });

HTML/Output

​

 $( '.menu-item-parent > a' ).addClass( 'accordion-item' );
    
// Get Sub-menu Item
let $submenuCount =  $( '[id*="-menu"] > li > a' );
    
$submenuCount.each( function() {
      
  // Find the number of items in a sub-menu.
  let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;
      
  // Add a leading zero if items is less than 10.
  if( $submenuLength < 10 ) $submenuLength = '0' + $submenuLength;
      
  // Create length into a style.
  $( this ).addClass( 'leading-zero' ).css( '--content', `'${$submenuLength}'` );
      
});

.container {
  display: block;
  position: relative;
  width: 100%;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

li { 
  list-style: none;
}

ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

ul.main-menu li:not(ul.sub-menu li) {
  display: block;
  position:relative;
  max-width: 300px;
}

ul.main-menu li a:not(ul.sub-menu li a) {
  display: block;
  position: relative;
  margin: 0.125rem 0;
  padding: 0.375rem 0;
  font-style: normal;
  font-weight: 400;
  font-size:1.125rem;
  text-transform: uppercase;
  letter-spacing: 0em;
  line-height: 1.4em;
  color: var(--theme-colour);
  text-decoration: none;
  cursor: pointer;
}

ul.main-menu li.menu-item-parent a:not(ul.sub-menu li a)::before {
  content: var(--content, "c");
  display: inline-block;
  position: relative;
  float: right;
  vertical-align: middle;
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0em!important;
}

ul.main-menu li {
  padding-top: 3px;
  padding-bottom: 3px;
}

ul.main-menu li.menu-item-parent > ul.sub-menu li > ul.sub-sub-menu {
  padding-bottom: 10px;
}

ul.main-menu li.menu-item-parent > ul.sub-menu li > ul.sub-sub-menu > li {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul id="menu-main-menu" class="main-menu">
    <li><a href="stackoverflow.com">Menu Item</a></li>
    <li class="menu-item-parent">
      <a>Menu Item Parent</a>
      <ul class="sub-menu">
        <li><a href="stackoverflow.com">Child</a></li>
        <li><a href="stackoverflow.com">Child</a></li>
        <li>
          <a href="#" class="specific-child">Title Child</a>
          <ul class="sub-sub-menu">
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
            <li><a href="stackoverflow.com">Child</a></li>
          </ul>
        </li>
        <li><a href="stackoverflow.com">Child</a></li>
        <li><a href="stackoverflow.com">Child</a></li>
      </ul>
    </li>
    <li><a href="stackoverflow.com">Menu Item</a></li>
  </ul>
</div>

​

Answer 1

换行

let $submenuLength = $( this ).parent().find( '.sub-menu' ).children().length;

至

let $submenuLength = $( this ).parent().find( '.sub-menu:not(.specific-child)' ).children().length;