时间戳

首页 > 解决方案 > jQuery 仅在 div 不为空时追加

javascript - jQuery 仅在 div 不为空时追加

问题描述

我有一个 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>

标签： javascriptjqueryhtml

解决方案

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

推荐阅读