title: How do I rename an <li> inside a <ul> using jQuery?
body: <p>I need your help.</p>
  
  <p>I couldn't find much reference material out there (if any) on the web, so I am turning to the help of the gurus and experts around this place. </p>
  
  <p>How can I make a listbox, such that when an item is highlighted, and I click on the Rename button at the top, an input box with the li's current value will be placed in the same spot as the selected LI value and the user will have the option to rename the li item. The changes are then saved if the lisbox has lost its focus. Similar examples are Windows, when you click "rename" the list item becomes an input box for the user to rename the file. I'd like to mock the same functionality and apply it to a UL LI listbox.</p>
  
  <p>For the sake of keeping things plain and simple, I am jQuery friendly.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/a4kg2612/" rel="nofollow">http://jsfiddle.net/a4kg2612/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(function(){
  
      $('li').click(function(){
  
          $('li.active').removeClass('active');
  
          $(this).addClass('active');
      });
  
  
  
      });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  .active {
      background-color: rgb(128,128,128);
  }
  #colors {
      border: 1px solid #000;
      width: 100px;
      list-style: none;
      margin: 0;
      padding: 2px;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;input type="button" value="raname" onclick="renameLi()"&gt;
  &lt;ul id="colors"&gt;
      &lt;li&gt;red&lt;/li&gt;
      &lt;li&gt;green&lt;/li&gt;
      &lt;li&gt;blue&lt;/li&gt;
      &lt;li&gt;yellow&lt;/li&gt;
      &lt;li&gt;orange&lt;/li&gt;
      &lt;li&gt;purple&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>