1

我有两个jQuery Tag-it，我需要一个 jQuery 函数，它将所有标签从一个 ul 列表复制到另一个。

两个列表的定义：

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

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

编辑：

代码悖论的第一个解决方案 

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

可以，但是当您查看常规标签列表时，它会创建一个输入字段，用于输入包装在最后一个<li>元素中的新标签（带有 class tagit-new）。

附加解决方案的效果是目标列表现在有两个输入字段：

关键字列表1

<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>

关键字列表2

<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 风格写得更短

4

2 回答 2

0

在询问之前我应该​​阅读jQuery Tag-it的文档！

有jQuery Tag-it 方法可以完全满足我的需要：

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

主要优点是 createTag 操作确保只添加标签，而这些标签不存在于目标列表中。

于 2012-06-25T16:45:21.223 回答
0 
            $('#keywordList1').tagit({

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

            });
于 2013-02-28T22:32:41.730 回答