Question

我有一个接收列表项的函数。当它这样做时，我想在列表项的文本的任一侧添加两个div：例如，当它收到项目时：

<li class="sortedli">
  Call Type
</li>

应该成为：

<li class="sortedli">
   <div class="sel-display-on">&nbsp;</div>
       Call Type
   <div class="sel-trash-on">&nbsp;</div>
</li>

然而，我的功能

receive: function (event, ui) {
   $(this).prepend("<div class=\"sel-display-on\"></div>");
   $(this).append("<div class=\"sel-trash-on\"></div>");
}

生成此标记：

<div class="sel-display-on"></div>
<li class="sortedli" style="">Caller Id</li>
<div class="sel-trash-on"></div>

我怎么能纠正这个？

Answer 1

您是.sortedli父母的追加/前置。使用上下文找到正确的元素：

receive: function (event, ui) {
   $('.sortedli', this).prepend("<div class=\"sel-display-on\"></div>");
   $('.sortedli', this).append("<div class=\"sel-trash-on\"></div>");
}

Answer 2

尝试如下，

receive: function (event, ui) {
   $(this).html(function (idx, oldhtml) {
      return "<div class=\"sel-display-on\">&nbsp;</div>" + 
             oldhtml + 
             "<div class=\"sel-trash-on\">&nbsp;</div>";
}

你正在使用什么jQuery UI小部件..接收函数看起来像   一个回调函数..所以这可能不是li元素。 - 维加

@Vega - 显然不是，而且基于输出它是li的   家长。 - adeneo 44秒前

如果以上操作不起作用，请尝试以下..

receive: function (event, ui) {
   $('.sortedli', this).html(function (idx, oldhtml) {
      return "<div class=\"sel-display-on\">&nbsp;</div>" + 
             oldhtml + 
             "<div class=\"sel-trash-on\">&nbsp;</div>";
}

在列表项中的文本的任一侧添加两个div

2 个答案: