Getting the class of the element being clicked in jQuery

Question

I have a jQuery snippet that collapses the responsive navbar (in mobile mode) when a menu item is clicked.

$('.navbar-fixed-top').click('li', function() {
    $('.navbar-collapse').collapse('hide');
});

However, I also have a couple of menu items with drop-down sub-menus and they have the Bootstrap class .dropdown assigned to them. I want the above function to exempt these dropdown menu items. To that end, I would like to retrieve the class of the item being clicked in order to make a decision on whether to collapse the navbar.

I tried this but it didn't output anything.

$('.navbar-fixed-top').click('li', function() {
    console.log($(this).class);
    $('.navbar-collapse').collapse('hide');
});

I also tried this with similar results.

$('.navbar-fixed-top').click('li', function(event) {
    console.log(event.target.class);
    $('.navbar-collapse').collapse('hide');
});

What else can I try? Right now, my navbar collapses when the dropdown menu item is tapped on a mobile device even before the user has a chance to see the sub-items which is what I am trying to remedy.

In case anyone wants to take a look, here's the HTML:

<ul class="nav navbar-nav pull-right">
    <li ng-class="{ active: isActive('/about')}"><a onClick="pagetop()" href="#about">ABOUT</a></li>
    <li ng-class="{ active: isActive('/blog')}"><a onClick="pagetop()" href="#blog">BLOG</a></li>
    <li><a onClick="pagetop()" href="#">PREMIUM</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
    </li>
    <li><a href="javascript:;" onClick="centerAlignModal()" data-target="#contact" data-toggle="modal">CONTACT</a></li>
</ul>

@naveen: All I need is to somehow reference the <li> that was clicked and then retrieve its class. — TheLearner
event.target (from your last snippet) will give you the thing that was clicked. Just remove the li event. — axhi

Shomz Shomz · Accepted Answer · 2016-01-17T02:52:41

In jQuery, you can do:

$(this).attr('class');

which is equal to className in plain JS:

event.target.className;

Since target references the anchor, you need the class of its parent (which is the li element). Try clicking the first two items here (added dummy-classes for them):

$('.nav').click('li', function(e) {
  alert(e.target.parentElement.className);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
  <li class="aboutClass" ng-class="{ active: isActive('/about')}"><a href="#about">ABOUT &lt;--- click me</a>
  </li>
  <li class="blogClass" ng-class="{ active: isActive('/blog')}"><a href="#blog">BLOG &lt;--- click me</a>
  </li>
  <li><a onClick="pagetop()" href="#">PREMIUM</a>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a>
      </li>
      <li role="separator" class="divider"></li>
      <li><a href="#">One more separated link</a>
      </li>
    </ul>
  </li>
  <li><a href="javascript:;" onClick="centerAlignModal()" data-target="#contact" data-toggle="modal">CONTACT</a>
  </li>
</ul>

Getting the class of the element being clicked in jQuery

1 Answers