Question

我需要检查我的图标在以下代码中的哪个类（如果存在）。

<li>
    <a href="#">link 1</a>
    <i class="fa fa-caret-down"></i>
</li>
<li>
    <a href="#">link 2</a>
</li>

看起来非常直接，但我似乎无法让它发挥作用。

$(document).on('click', 'li a', function() {
    if ($(this).find('i').hasClass('.fa-caret-down')) {
        alert('down');
    } else if ($(this).find('i').hasClass('.fa-caret-up')) {
        alert('up');
    }
});

我错过了什么？

Answer 1

您的目标是<a>，并在其中要求<i>（this）。你想要做的是要求this.parent()并从那里继续，像这样：

$(document).on('click', 'li a', function() {
    if ($(this).parent().find('i').hasClass('fa-caret-down')) {
        alert('down');
    } else if ($(this).parent().find('i').hasClass('fa-caret-up')) {
        alert('up');
    }
});

ps：你也可以定位li（而不是li a）。

Answer 2

两个错误。

您必须使用siblings()作为find()搜索子元素。
在hasClass()中，您必须从课程中删除点.。

＆＃13;

$(document).on('click', 'li a', function() {
  if ($(this).siblings('i').hasClass('fa-caret-down')) {
    alert('down');
  } else if ($(this).siblings('i').hasClass('fa-caret-up')) {
    alert('up');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<li>
  <a href="#">link 1</a>
  <i class="fa fa-caret-down"></i>
</li>
<li>
  <a href="#">link 2</a>
</li>

＆＃13;

如果孩子上课了

2 个答案: