在父级中查找 .class<li> 通过 JQuery

Question

<!--HTML-->
<ul class="navigation">
    <li>
        <a class="handle-link" href=""><img src=""/>Dashboard</a>
    </li>

    <li class="active">
        <a href="#" class="expand"><img src=""/>Multiple</a>
        <ul>
            <li class="current">
                <a class="handle-link sub-menu" href="">One</a>
            </li>
            <li>
                <a class="handle-link sub-menu" href="">Two</a>
            </li>   
            <li>
                <a class="handle-link sub-menu" href="">Three</a>
            </li>
        </ul>
    </li>
    <li >
        <a class="handle-link" href=""><img src=""/>Single</a>
    </li>
</ul>


    $('a.handle-link').click(function (e) {
        e.preventDefault();
        var currentMenuItem = $(this);
        var parentLI = $(currentMenuItem).closest('li');

        if ($(currentMenuItem).hasClass('sub-menu')) {
            if ($(parentLI.hasClass('current'))) {
                alert('This is current');
            }
            else {
                //Error here- 
                alert('This is not current'); //This is not executing
            }
        }
        else {
            alert('this is somewhere else.');
        }
    });

When I click on "Two", it also returns "This is current". But it should return "This is not current".

Any help?

Answer 1

Problem is in your if statement because you are passing a jQuery object( $(parentLI.hasClass('current')) ) to it which will always be truthy.

So just remove the wrapping $() call, so that the value returned by hasClass is evaluated by the if statement

 if (parentLI.hasClass('current')) {
   alert('This is current');
 } else {
   //Error here- 
   alert('This is not current'); //This is not executing
 }

Answer 2

$(parentLI.hasClass('current')) is always going to be truthy since jQuery object is returned. You need get rid of the wrapping $()

if (parentLI.hasClass('current')) { ...

Answer 3

Try this:

$('a.handle-link').click(function (e) {
  e.preventDefault();
  var currentMenuItem = $(this);
  var parentLI = currentMenuItem.parent('li');

  if (currentMenuItem.hasClass('sub-menu')) {
      if (parentLI.hasClass('current')) {
          alert('This is current');
      } else {
          alert('This is not current');
      }
    } else {
        alert('this is somewhere else.');
    }
});

WORKING FIDDLE