title: Jquery: Wrap each <LI> with an <a href="#"> that links to the text of the <LI> it's wrapping around, but replaces the spaces with hyphens (-)
body: <pre><code>$('h2').each(function() {
      $('UL.chapters_list').append($('&lt;li/&gt;', {text: $(this).text()}))
  });
  </code></pre>
  
  <p>This code grabs all of the <code>&lt;H2&gt;</code> tags on the page, then copies each of them to their own <code>&lt;LI&gt;</code> inside of <code>&lt;UL class="chapters_list"&gt;</code>, so essentially it creates a list of all the <code>&lt;H2&gt;</code> tags.</p>
  
  <p>I need to wrap each <code>&lt;LI&gt;</code> tag that it creates, with an anchor link, this link should have the text of the <code>&lt;h2&gt;</code> that it grabbed, but replacing the spaces in the <code>&lt;h2&gt;</code> with hyphens <code>'-'</code></p>
  
  <p>So let's say my script sees 2 <code>&lt;H2&gt;</code> tags on the page, so it grabs the texts of those <code>&lt;H2&gt;</code> tags and copies them to:</p>
  
  <pre><code>&lt;UL class="chapters_list"&gt;
  &lt;LI&gt;title number one&lt;/LI&gt;
  &lt;LI&gt;and number two&lt;/LI&gt;
  &lt;/UL&gt;
  </code></pre>
  
  <p>I need it to now wrap each of those <LI> tags with an anchor link, the anchor link will be the text of the LI(or the H2 it just grabbed) but with hyphens (-) replacing spaces.</p>
  
  <p>so the above will turn into:</p>
  
  <pre><code>&lt;UL class="chapters_list"&gt;
      &lt;a href="#title-number-one"&gt;
          &lt;LI&gt;title number one&lt;/LI&gt;
      &lt;/a&gt;
      &lt;a href="#and-number-two"&gt;
          &lt;LI&gt;and number two&lt;/LI&gt;
      &lt;/a&gt;
  &lt;/UL&gt;
  </code></pre>
  
  <p>Can anyone help? it shouldn't be too hard, with the code i've provided, thank-YOU.</p>