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

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.');
        }
    });

当我点击 "Two" 时，它也 return 是 "This is current"。但是应该return"This is not current".

有什么帮助吗？

Answer 1

$(parentLI.hasClass('current')) 总是真实的，因为返回了 jQuery 对象。你需要去掉包装 $()

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

Answer 2

问题出在你的 if 语句中，因为你正在向它传递一个 jQuery 对象（$(parentLI.hasClass('current'))），它永远是真实的。

所以只需删除包装 $() 调用，以便 hasClass 返回的值由 if 语句计算

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

Answer 3

试试这个：

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

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

Find .class in parent <li> by JQuery

jquery

jquery-selectors