Question

I have a sortable that it was loaded from JSON files.
This is a sortable’s jquery http://jqueryui.com/demos/sortable

But I want to edit one item. The item before is inserted from the user. Looking the http://jqueryui.com/demos/sortable for example I want Item 3. How?

Now I want to edit one item for example Little birds, with JavaScript or jQuery, with one variable’s string. This variable is inserted from a user in a textarea.(this i know).

How to edit the item’s sortable using the variable???

I receive from a textarea the element name that I have to cancel.

<textarea></textarea>

I know how you analyze the list but edit (change) the name’s item’s sortable?

The HTML code of the sortable:

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

Please, I don’t want contenteditable

Answer 1

You either need to target text nodes or replace the full html of the element. We have no way to know how you intend to target which sortable gets edited.

Following solution stores the icon html, and updates full html of the element.

DEMO: 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);    
})