javascript - jQuery 仅当 div 不为空时才追加

Question

我有一个 div 元素，我想在悬停时向其附加一个图标，但只有当 div 不为空时 jQuery 才会附加图标，否则什么也不会发生。

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

只有当 div 不为空时，jQuery 才会附加图标，否则什么也不会发生。

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