javascript - 如何在不使用 tablecontente 的情况下编辑可排序的项目

Question

我有一个可排序，它是从 JSON 文件加载的。 这是一个可排序的 jquery http://jqueryui.com/demos/sortable

但我想编辑一个项目。之前的项目是从用户插入的。寻找 http://jqueryui.com/demos/sortable例如，我想要项目 3。如何？

现在我想编辑一个项目，例如 Little birds，使用 JavaScript 或 jQuery，使用一个变量的字符串。此变量是从 textarea 中的用户插入的。(我知道这一点)。

如何使用变量编辑项目的排序？？？

我从 textarea 收到我必须取消的元素名称。

<textarea></textarea>

我知道您如何分析列表但编辑(更改)名称项的可排序？

sortable 的 HTML 代码:

<div id="sortparam">

<ul style="" class="ui-sortable" id="sortable">
    <li style="" id="1" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Singular sensation</li>
    <li style="" id="2" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Beady little eyes</li>
    <li style="" id="3" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Little birds </li>
</ul>

</div>

拜托，我不想contenteditable

Answer 1

您需要定位文本节点或替换元素的完整 html。我们无法知道您打算如何定位要编辑的可排序对象。

以下解决方案存储图标 html，并更新元素的完整 html。

演示:http://jsfiddle.net/WZeMH/

/* no relationship given on how to determine which sortable to edit use second one*/
var whichSortable= 2;

/* define sortable element to edit */
var $sortableEl=$('#'+whichSortable);

/* store icon span html string*/
var iconSpan=$('<div>').append( $sortableEl.find('.ui-icon').clone() ).html();

$('textarea').keyup(function(){
    var val=$(this).val();
     $sortableEl.html( iconSpan + val);    
})