Question

我有一个无序的列表：

<ul id="sortable2" class="connectedSortable">
</ul>

有时候，我会将listable1中的列表项拖到这个sortable2中，修改如下：

<ul id="sortable2" class="connectedSortable">
        <li class="ui-state-default">First</li>
        <li class="ui-state-default">Second</li>
        <li class="ui-state-default">Third</li>
</ul>

我的问题是，一旦拖入sortable2，我如何在这些列表项中附加以下html：

<a title='delete' class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>

我想使用jquery，到目前为止，我已经尝试在UL的dom树上添加和添加内容，但是它出错了。任何帮助表示赞赏。

Answer 1

在这些情况下，如果您提供问题的运行示例，则会有所帮助。我猜你正在使用jQuery UI和jQuery Sortable。

您可以使用Sortable＆＃34;接收＆＃34;事件并将HTML附加到已更改的元素。

＆＃13;

$("#sortable1, #sortable2").sortable({
  connectWith: ".connectedSortable",
  receive: function(event, ui) {
    $(ui.item).append('<a title="delete" class="itemDelete"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>');
  }
}).disableSelection();

＆＃13;

#sortable1,
#sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

#sortable1 li,
#sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

＆＃13;

此外，jQuery UI在Sortable和Draggable上都有大量文档，请务必查看事件部分以获取有助于您的更多信息。

将html添加到另一个列表后，将html添加到无序列表中的列表项

1 个答案: