jQuery Tag-it：將標籤從一個列表複製到另一個列表

我有兩個jQuery Tag-it，我需要一個jQuery函數將所有標籤從一個ul列表複製到另一個列表。兩個列表jQuery Tag-it：將標籤從一個列表複製到另一個列表

定義：

$('#keywordList1').tagit({ 
     itemName : 'item', 
     fieldName : 'tags', 
     caseSensitive : false, 
     allowSpaces : true 
}); 

$('#keywordList2').tagit({ 
     itemName : 'item2', 
     fieldName : 'tags', 
     caseSensitive : false, 
     allowSpaces : true 
});

編輯：

首屆解決方案從thecodeparadox

$('#keywordList2').append($('#keywordList1 li').clone())

的作品，但是當你看一個普通標籤 - 它列出它創建一個輸入字段fo r輸入包裹在最後<li>元素中的新標籤（類別爲tagit-new）。

與追加解決方案具有目的地清單如今已經兩個輸入字段效果：

keywordList1

<ul style="position: relative; left: 12px; width: 374px;" 
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content" 
id="keywordList1"> 
<li 
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span 
    class="tagit-label">keyword1</span><a class="tagit-close"><span 
     class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input 
    type="hidden" name="item[tags][]" value="keyword" 
    style="display: none;"></li> 
<li 
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span 
    class="tagit-label">keyword2</span><a class="tagit-close"><span 
     class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input 
    type="hidden" name="item[tags][]" value="keyword2" 
    style="display: none;"></li> 
<li class="tagit-new"><input type="text" 
    class="ui-widget-content ui-autocomplete-input" autocomplete="off" 
    role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
    <input type="text" class="ui-widget-content ui-autocomplete-input" 
    autocomplete="off" role="textbox" aria-autocomplete="list" 
    aria-haspopup="true"></li>

keywordList2

<ul style="position: relative; left: 12px; width: 374px; top: 20px;" 
class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all tagit ui-widget-content" 
id="keywordList2"> 
<li class="tagit-new"><input type="text" 
    class="ui-widget-content ui-autocomplete-input" autocomplete="off" 
    role="textbox" aria-autocomplete="list" aria-haspopup="true"></li> 
<li 
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span 
    class="tagit-label">keyword1</span><a class="tagit-close"><span 
     class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input 
    type="hidden" name="item[tags][]" value="keyword1" 
    style="display: none;"></li> 
<li 
    class="tagit-choice ui-widget-content ui-state-default ui-corner-all"><span 
    class="tagit-label">keyword2</span><a class="tagit-close"><span 
     class="text-icon">×</span><span class="ui-icon ui-icon-close"></span></a><input 
    type="hidden" name="item[tags][]" value="keyword2" 
    style="display: none;"></li> 
<li class="tagit-new"><input type="text" 
    class="ui-widget-content ui-autocomplete-input" autocomplete="off" 
    role="textbox" aria-autocomplete="list" aria-haspopup="true"></li>

任何想法如何刪除第一個輸入元素？

EDIT2： 從thecodeparadox更新的解決方案的效果要好得多。我已經擴展了腳本，以便第一<li>（保持輸入場）被移到列表的末尾：

$('#keywordList2').append($('#keywordList1 li:not(:last)').clone()) 
$('#keywordList2').append($('#keywordList2 li:first'))

我相信IST可以在jQuery的風格寫短

來源

2012-06-25 jimmybondy

是獨立容器中的列表嗎？ –

@PatsyIssa：好的，每個列表都是一個單獨的'ul'列表，在我的情況下，它們在不同的表格單元中'' – jimmybondy

在詢問之前，我應該先閱讀jQuery Tag-it的文檔！

有jQuery Tag-it methods它可以做正是我需要的：

$($('#keywordList1').tagit('assignedTags')).each(function() { 
     $('#keywordList2').tagit('createTag', this); 
    });

主要優勢IST的createTag操作確保只有標記將被添加，這並不在目的地列表中存在。

來源

2012-06-25 16:45:21 jimmybondy

  $('#keywordList1').tagit({ 

       onTagClicked: function(event,ui){ 
        $('#keywordList2').tagit("createTag",ui.tagLabel); 
       } 

      });

來源

2013-02-28 22:32:41

jQuery Tag-it：將標籤從一個列表複製到另一個列表

回答

相關問題