我有两个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
});
修改
来自 thecodeparadox
的第一个解决方案$('#keywordList2').append( $('#keywordList1 li').clone() )
有效,但是当您查看常规标记列表时,它会创建一个输入字段,用于输入包含在最后<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') )
我确信在jQuery风格的
中可以写得更短答案 0 :(得分:0)
在询问之前我应该阅读jQuery Tag-it的文档!
有jQuery Tag-it methods可以完全满足我的需要:
$($('#keywordList1').tagit('assignedTags')).each(function() {
$('#keywordList2').tagit('createTag', this);
});
主要优点是createTag-operation确保只添加标记,而目标列表中不存在这些标记。
答案 1 :(得分:0)
$('#keywordList1').tagit({
onTagClicked: function(event,ui){
$('#keywordList2').tagit("createTag",ui.tagLabel);
}
});