如何使用jQuery将文本附加到列表之间传输的项目

How do I append text to item transfered between lists using jQuery?

本文关键字：之间 列表 传输 项目 jQuery 何使用 文本      更新时间：2023-09-26

我使用jquery将选定的项目从一个列表转移到另一个列表。源列表HTML为

    <ul id="source-list">
      <li id="1">Accordion</li>
      <li id="2">Autocomplete</li>
      <li id="3">Tabs</li>  
   </ul>

这里是jquery

     jQuery(document).ready(function($) {
      $("#source-list, #target-list").selectable();
      $("#add-button").click(add);
      $("#remove-button").click(remove);

     addHiglightPlugin();      
     }); 

   }
 function add() {
   transfer($("#source-list li.ui-selected"));
 }   
      function transfer(listItems) {
  alert($(this).data("index", $("#source-list li").index($(this))));
  listItems.fadeOut(function() {
    $(this)
      .removeClass("ui-selected")
      .clone()
      .appendTo("#target-list")
      .fadeIn()
      .data("index", $("#source-list li").index($(this)))
      .highlight();
  });
}

当选定的项目被转移时，我想在其上附加文本。例如，如果选择并传输了"Accordion"，我希望目标文本为"Accordion -点击这里查看照片"

在你克隆它之后，在你淡出它之前做- 

 $(this)
      .removeClass("ui-selected")
      .clone()
      .appendTo("#target-list")
      .html( $(this).html() + ' - Click here to view photo' )
      .fadeIn()
      .data("index", $("#source-list li").index($(this)))
      .highlight();

我添加了一个FIDDLE来演示该技术

相关文章：