CODEWITHSUNDEEP
jqueryhtmlcss
user3386779
user3386779

Reputation: 7185

disable the list item for empty parent

I have 5 list item which has a tag with class Articles, Blogs, Brochures, Webinars, Whitepapers and have their child content in 'view-content' div.on load it shows blogs and hide the other child.when I chick 'whitepapers' child whitepaper shows and other child will hide(working fine).

I want to add the class 'disable' to the list item as <li class="disable"><a></a></li> for the list which doesn't has the child.In my example 'Brochures' and 'Webinars' have no child so need to add the class 'disable' for the respective list.

(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>

Upvotes: 1

Views: 60

Answers (3)

WizardCoder
WizardCoder

Reputation: 3461

You can .each through the list items, check if more than one elements share the same class. If there isn't any other elements then add a class of disabled.

(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>

Upvotes: 1

Lewk
Lewk

Reputation: 116

I assume you just want to run this on the first load, rather than on every time the mouserover or click happens.

You will also probably want to stop your mouseover and click functions in the li has the class disable, but I'll leave that for you :)

(function($) {
  function perspective_type() {
    $(".perspective-list a").each(function(e){
      var target = $(this).attr('href');
      if($('div.'+target).text() == ''){
        $(this).parent().addClass('disable')
      }
    });
    $(".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>

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

I guess this jsfiddle will help you https://jsfiddle.net/h3ttxk8r/

jQuery(document).ready(function($) {
    var href = 'Blogs';
    jQuery('.perspective-list a.' + href + '').parent().addClass('active');
    jQuery('.wrapper > :not(.' + href + ')').hide();
    perspective_type();

    $('ul > li > a').each(function(){
        if(!$('div').hasClass($(this).attr('href'))){
            $(this).parent().addClass('disabled');
        }
   });

});

CSS

.disabled {
    cursor: none;
    opacity: 0.5;
    pointer-events: none;
}

Upvotes: 1

Related Questions