簡體   English   中英

如果使用Jquery列表沒有值,如何刪除span標簽

[英]How to remove span tag if list has no value using Jquery

我需要一個幫助。 我使用Bootstrap方式有許多menu-submenu列表。 如果任何列表或子列表內部沒有任何值,則需要刪除span標記。 我在下面解釋我的代碼。

<div class="navbar-toggleable-sm collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
   <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_navigationUl" class="navbar-nav navbar-top-view nav">
      <li class="dropdown mega-drop pstatic">
         <a href="/vocational-school-programs" class="mainmenuitem">Programs<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul class="dropdown-menu mega-h-drop-menu fwidth activeul">
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Business</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/business-office-administration">Business Office Administration</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Cosmetology</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/cosmetology">Cosmetology</a></li>
               </ul>
            </li>
            <li class="pstatic">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Health Care &amp; Administration</a>
               <ul class="dropdown-menu mega-v-drop-menu w-100">
                  <div class="row fullmenu">
                     <div class="col-sm-6 pull-left">
                        <ul>
                           <li><a href="/vocational-school-programs/limited-scope-x-ray-technician">Limited Scope X-Ray Technician</a></li>
                           <li><a href="/vocational-school-programs/patient-care-technician">Patient Care Technician</a></li>
                           <li><a href="/vocational-school-programs/pharmacy-technician">Pharmacy Technician</a></li>
                           <li><a href="/vocational-school-programs/health-services-administration">Health Services Administration</a></li>
                        </ul>
                     </div>
                     <div class="col-sm-6 pull-left">
                        <ul>
                           <li><a href="/vocational-school-programs/medical-assistant-technician">Medical Assistant Technician</a></li>
                           <li><a href="/vocational-school-programs/medical-front-office-billing">Medical Front Office &amp; Billing</a></li>
                           <li><a href="/vocational-school-programs/dental-assistant">Dental Assistant</a></li>
                        </ul>
                     </div>
                  </div>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">HVAC</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/heating-ventilation-air-conditioning">Heating Ventilation and Air Condition (HVAC)</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Information Technology</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/information-technology">Information Technology</a></li>
                  <li><a href="/vocational-school-programs/computer-network-technician">Computer Network Technician</a></li>
               </ul>
            </li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">Nursing</a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/nursing">Nursing</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/campus-search" class="mainmenuitem">Campuses<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul class="dropdown-menu mega-h-drop-menu activeul">
            <li><a href="/vocational-school-programs/tx/houston">Houston</a></li>
            <li><a href="/vocational-school-programs/fl/orlando">Orlando</a></li>
            <li><a href="/vocational-school-programs/fl/boynton-beach">Boynton Beach</a></li>
            <li class="dropdown">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle">More </a>
               <ul class="dropdown-menu s-drop">
                  <li><a href="/vocational-school-programs/fl/jacksonville">Jacksonville</a></li>
                  <li><a href="/vocational-school-programs/fl/hialeah">Hialeah</a></li>
                  <li><a href="/vocational-school-programs/fl/tampa">Tampa</a></li>
                  <li><a href="/vocational-school-programs/fl/lauderdale-lakes">Lauderdale Lakes</a></li>
                  <li><a href="/vocational-school-programs/fl/margate">Margate</a></li>
                  <li><a href="/vocational-school-programs/fl/miami">Miami (Main Campus)</a></li>
                  <li><a href="/vocational-school-programs/fl/pembroke-pines">Pembroke Pines</a></li>
                  <li><a href="/vocational-school-programs/fl/west-palm-beach">West Palm Beach</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/admissions" class="mainmenuitem">Admissions<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/financial-aid" class="mainmenuitem">Financial Aid<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/career-services" class="mainmenuitem">Career Services<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl04_childNodesContainer" class="dropdown-menu activeul">
            <li class="dropdown mega-drop pstatic">
               <a href="/employ-our-graduates" class="mainmenuitem">Employer Resources<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
            </li>
         </ul>
      </li>
      <li class="dropdown mega-drop pstatic">
         <a href="/about-us" class="mainmenuitem">About Us<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
         <ul id="ctl00_CPNavigation_ctl00_C_TA057AC37001_ctl00_ctl00_ctl02_ctl05_childNodesContainer" class="dropdown-menu activeul">
            <li class="dropdown mega-drop pstatic">
               <a href="/about-us/accreditations" class="mainmenuitem">Accreditations<span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
            </li>
         </ul>
      </li>
   </ul>
</div>

上面的代碼是html生成的輸出。 實際上,所有數據都是在li元素上動態綁定的。 在這里,我需要任何parent lichild li沒有ul元素或值,那么我將刪除相應的span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>標簽。 我需要使用Jquery/Javascript動態制作。

您可以使用jQuery來獲得它:

$(".navbar-toggleable-sm span").each(function() {
    if ($(this).parents("li:first").find("ul").length == 0)
        $(this).hide();
    else
        $(this).show();
});

對於找到的每個范圍,請檢查其父li是否有孩子ul 如果找到,則跨度必須可見,否則應隱藏。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM