jQuery добавляется только если div не пуст

Question

У меня есть элемент div, и я хочу добавить значок к нему при наведении курсора, но jQuery добавляет значок только в том случае, если div не пустой, иначе ничего не происходит.

$('div #tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  <p>The div isn't empty</p>
</div>

Answer 1

Поскольку div и id относятся к одному элементу, между ними не должно быть пробела в селекторе.

Пожалуйста,Примечание: Поскольку атрибут id является уникальным в документе, просто $('#tags') достаточно безопасно для целевого элемента.

$('#tags').hover(function() {
  $(this).append('<i class="fa fa-plus-circle ml-1 add-tag-icon"></i>')
}, function() {
  $(this).find("i").last().remove();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
    <p>The div isn't empty</p>
</div>

jQuery добавляет значок, только если div не пуст, иначе ничего не происходит.

Если div пуст, на странице ничего нет, на котором вы можете парить. Пожалуйста, смотрите следующий пример:

$('#tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});

#tags{
  width: 100px;
  height: 15px;
  background-color: lightgray;
  border: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  
</div>

Answer 2

$('div #tags') - неправильный выбор для <div> в вашем случае. То, что вы сделали, означает, что jQuery ищет элемент с идентификатором #tags внутри <div>. Вместо этого вам нужно сделать это $('#tags').

Answer 3

Высота и ширина <div> & <p> элементов по умолчанию 0, следовательно, ваш эффект наведения не будет генерироваться (вы не можете навести курсор на элемент):

<div id="tags"><p></p></div>

Если вы напишете какой-нибудь текствнутри элемента ширина и высота изменятся, и вы сможете создать эффект наведения:

<div id="tags"><p>Not empty</p></div>

Следовательно, <i> не добавляется, если div или p элементы пусты