Как удалить тег span, если список не имеет значения, используя Jquery - PullRequest
Новая
       21

Как удалить тег span, если список не имеет значения, используя Jquery

0 голосов
/ 28 августа 2018

Мне нужна одна помощь. У меня есть много списков menu-submenu в выпадающем виде, используя Bootstrap. Здесь мне нужно удалить тег 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 li или child li нет элемента или значения ul, тогда я удалю соответствующий тег span class="caret" data-toggle="dropdown"><i class="fa fa-caret-down" aria-hidden="true"></i></span>. Мне нужно сделать динамически, используя Jquery/Javascript.

1 Ответ

0 голосов
/ 28 августа 2018

Вы можете получить его, используя jQuery: 

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

Для каждого найденного диапазона проверьте, есть ли у его родителя li дочерний элемент ul. Если найден, промежуток должен быть видимым, в противном случае должен быть скрыт.

...