Если у ребенка есть класс

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

Две ошибки.

1. Вы должны использовать siblings() как find() поиск дочерних элементов.

2. В hasClass() вы должны удалить dot . из класса.

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

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

Answer 2

Вы нацеливаете <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 а).