javascript - How do I rename an <li> inside a <ul> using jQuery? -
i need help.
i couldn't find much reference material out there (if any) on web, turning help of gurus , experts around place.
how can create listbox, such when item highlighted, , click on rename button @ top, input box li's current value placed in same spot selected li value , user have alternative rename li item. changes saved if lisbox has lost focus. similar examples windows, when click "rename" list item becomes input box user rename file. i'd mock same functionality , apply ul li listbox.
for sake of keeping things plain , simple, jquery friendly.
here's fiddle: http://jsfiddle.net/a4kg2612/
html:
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('li').click(function(){ $('li.active').removeclass('active'); $(this).addclass('active'); }); }); </script> <style type="text/css"> .active { background-color: rgb(128,128,128); } #colors { border: 1px solid #000; width: 100px; list-style: none; margin: 0; padding: 2px; } </style> </head> <body> <input type="button" value="raname" onclick="renameli()"> <ul id="colors"> <li>red</li> <li>green</li> <li>blue</li> <li>yellow</li> <li>orange</li> <li>purple</li> </ul> </body> </html>
my solution temporarily makes li input , when done replaces li
http://jsfiddle.net/a4kg2612/1/
$('li').click(function(){ $('li.active').removeclass('active'); $(this).addclass('active'); $(this).replacewith('<input type="text" id="change_me">'); var val = $('#change_me').val(); if ( val ) { $('#change_me').replacewith('<li>' + val + '</li>'); } }); this incorporates rename button:
http://jsfiddle.net/a4kg2612/5/
this want:
http://jsfiddle.net/a4kg2612/6/
$('li').click(function(){ $('li.active').removeclass('active'); $(this).addclass('active'); var li = $(this); $("#rename").click(function() { $(li).replacewith('<input type="text" id="change_me">'); $("#change_me").focus(); setinterval(function(){ var val = $("#change_me").val(); if ( ! $("#change_me").is(":focus") ) { $('#change_me').replacewith('<li>' + val + '</li>'); } }, 100); }); }); javascript jquery html html-lists
No comments:
Post a Comment