可排序jQuery UI如何向空列表添加自定义占位符

我正在尝试用可排序的插件制作一个仪表板。我已经设置了两个不同的列作为可排序列表。我想做的是：如果可排序列表为空，如果其中没有小部件，我想在这里添加一个自定义描述字段。使用jQuery，我可以向空div添加描述，但该描述是永久的。我希望代码持续运行

<div id="draggable-area" class="row">
  <div class="col-md-8 col-xl-8 col-xs-8">
    <div class="sortable-list">
      <div class="sortable-item">
        <div class="main-title">
          <span class="pull-left">
            <span class="trade-icon"></span>
            <h1>Trades</h1>
          </span>
          <i class="fa fa-arrows drag" aria-hidden="true"></i>
          <span class="pull-right">
            <a href="#"><strong>All new trades</strong></a>
          </span>
        </div>

        <div class="trade-posts">
          <ul>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
            <li><a href="#">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-xl-4 col-xs-4">
    <div class="sortable-list">

    </div>
  </div>
</div>

交易

此代码用于检查空div

$(".sortable-list").each(function(){
function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($(this))) {
    $("<div class='empty'><span>You can drop here.</span></div>").appendTo(this);
  }
});

$（“.sortable list”）。每个（函数（）{
函数为空（el）{
return！$.trim（el.html（））
}
如果（isEmpty（$（this）））{
$（“您可以放在这里。”）。附加到（此）；
}
});

---

根据我所了解的情况，我试图做出改变。 我已经改变了您使用每个函数的方式

请检查这把小提琴：

代码：

---

如果您还有其他需要，请进一步澄清。我会做必要的改变

请再解释一下：你的意思是当容器内没有可排序的元素时，你想在容器内显示消息吗？是的@Nitesh，这正是我想要的。我更新了我的问题@Nitesh，谢谢你的帮助。我加了一个gif。我希望我能很好地解释这个问题。

function insertContent(){
  var $list = $(".sortable-list");
  $list.each(function(index,li){
    if($(li).text().trim().length === 0){
     $(li).text("Please insert here...");
    }
  })
}