从 .length() 中删除特定子项 [重复]

Posted 2023-05-09

【中文标题】从 .length() 中删除特定子项 [重复]

【英文标题】：Remove a Specific Child from .length() [duplicate]

【发布时间】：2021-11-27 15:03:28

【问题描述】：

我将这个 JS/JQuery 代码用作手风琴菜单的一部分，它在父级旁边添加了子级计数。我有另一个代码，它为在该父级下没有直接链接的孩子提供了一个特定的类，我用它来命名“子子菜单”。以下示例（这是基于WordPress菜单格式）。

如何调整我的孩子计数代码以排除具有 'class="specific-child"' 的孩子？现在计数包括它，并且由于它不是任何/任何地方的实际链接，我想将它从 .length 中排除。

谢谢！

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/输出

 $( '.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="***.com">Menu Item</a></li>
    <li class="menu-item-parent">
      <a>Menu Item Parent</a>
      <ul class="sub-menu">
        <li><a href="***.com">Child</a></li>
        <li><a href="***.com">Child</a></li>
        <li>
          <a href="#" class="specific-child">Title Child</a>
          <ul class="sub-sub-menu">
            <li><a href="***.com">Child</a></li>
            <li><a href="***.com">Child</a></li>
            <li><a href="***.com">Child</a></li>
            <li><a href="***.com">Child</a></li>
          </ul>
        </li>
        <li><a href="***.com">Child</a></li>
        <li><a href="***.com">Child</a></li>
      </ul>
    </li>
    <li><a href="***.com">Menu Item</a></li>
  </ul>
</div>

【问题讨论】：

您的 html 有几个问题。我建议通过验证器运行它。你将很难让 jQuery 正确地看到这些缺陷。

但我怀疑这回答了你的问题：***.com/questions/3015103/…

【参考方案1】：

换行

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

到

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