Question

我正在使用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 - 点击此处查看照片”

Answer 1

在克隆之后以及在淡入之前执行此操作 -

 $(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来演示这项技术。

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

1 个答案: