jquery - 禁用空父项的列表项

Question

我有 5 个列表项，其中包含类文章、博客、小册子、网络研讨会、白皮书的标签，并将其子内容放在“查看内容”div 中。加载时，它会显示博客并隐藏其他子项。当我小鸡时“白皮书”子白皮书显示，其他子白皮书将隐藏(工作正常)。

我想将“disable”类添加到列表项中，如 <li class="disable"><a></a></li>对于没有子项的列表。在我的示例中，“宣传册”和“网络研讨会”没有子项，因此需要为相应列表添加“禁用”类。

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  jQuery(document).ready(function($) {
    var href = 'Blogs';
    jQuery('.perspective-list a.' + href + '').parent().addClass('active');
    jQuery('.wrapper > :not(.' + href + ')').hide();
    perspective_type();
  });

})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective-list">
  <ul class="nav nav-justified">
    <li class=""><a href="Articles" class="Articles">Articles</a></li>
    <li class=""><a href="Blogs" class="Blogs">Blogs</a></li>
    <li class=""><a href="Brochures" class="Brochures">Brochures</a></li>
    <li class=""><a href="Webinars" class="Webinars">Webinars</a></li>
    <li class="active"><a href="Whitepapers" class="Whitepapers">Whitepapers</a></li>
  </ul>
</div>
<div class="view-content">
  <div class="wrapper">
    <div class=" Articles">
      article
    </div>
  </div>
  <div class="wrapper">
    <div class="Blogs">
      Blogs
    </div>
  </div>
  <div class="wrapper">
    <div class="Whitepapers">
      Whitepapers
    </div>
  </div>
</div>

Answer 1

你可以.each通过列表项，检查是否有多个元素共享同一个类。如果没有任何其他元素，则添加禁用类。

(function($) {
  function perspective_type() {
    $(".perspective-list a").click(function(e) {
      e.preventDefault();
      $(".perspective-list a").parent().removeClass('active');
      $('.wrapper .page-perspective').show();
      var href = $(this).attr('href');
      $('.wrapper > :not(.' + href + ')').hide();
      $('.wrapper > .' + href + '').show();
      $(this).parent().addClass('active');
    });
    $(".perspective-list a").mouseover(
      function() {
        $(".perspective-list a").removeClass('hover');
        $(this).parent().addClass('hover');
      });
    $(".perspective-list a").mouseout(
      function() {
        $(".perspective-list a").each(function() {
          $(this).parent().removeClass('hover');
        });
      });
    $('#perspectives .perspectiveReadurl', '#page_perspectives .perspectiveReadurl').find('a').attr('target', '_blank');
  }
  var href = 'Blogs';
  jQuery('.perspective-list a.' + href + '').parent().addClass('active');
  jQuery('.wrapper > :not(.' + href + ')').hide();
  perspective_type();
  
  jQuery(".nav-justified a").each(function() {
    var className = jQuery(this).attr("class");
    var elemCount = jQuery("." + className).length;
    if(elemCount == 1) {
     jQuery(this).parent().addClass("disable");
    }
  });

})(jQuery)

.disable {
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective-list">
  <ul class="nav nav-justified">
    <li class=""><a href="Articles" class="Articles">Articles</a></li>
    <li class=""><a href="Blogs" class="Blogs">Blogs</a></li>
    <li class=""><a href="Brochures" class="Brochures">Brochures</a></li>
    <li class=""><a href="Webinars" class="Webinars">Webinars</a></li>
    <li class="active"><a href="Whitepapers" class="Whitepapers">Whitepapers</a></li>
  </ul>
</div>
<div class="view-content">
  <div class="wrapper">
    <div class=" Articles">
      article
    </div>
  </div>
  <div class="wrapper">
    <div class="Blogs">
      Blogs
    </div>
  </div>
  <div class="wrapper">
    <div class="Whitepapers">
      Whitepapers
    </div>
  </div>
</div>