hide and show dynamically created paragraphs using jquery
<p>I have a Sharepoint site that is dynamically grabbing a name and description from a list. </p>

<pre><code>var name = $(this).attr('ows_Title');  //This is the internal storage name in SP
var comments = $(this).attr('ows_MetaInfo').match(/^_Comments:SW\|(.*)$/m);
</code></pre>

<p>I am then taking these vars and feeding them into an empty div on my page (the div is called 'docList')</p>

<pre><code>        var item = "&lt;a class='docLinks' href='http:path/to/the/doc/" + name + "'&gt;" 
+ title + "&lt;/a&gt;&lt;br&gt;&lt;p&gt;&lt;span class='description' id='para_" + i + "'&gt;"
    + comments + "&lt;/span&gt;&lt;/p&gt;&lt;br&gt;";
        $('#docList').append(item);
</code></pre>

<p>I am trying to make it so the 'comments' i.e. description of the item, appear on hover below the name of the item.</p>

<p>I have tried various iterations on this theme:</p>

<pre><code>     $('#docList a').hover(function(){
          $(this).child().css({'display':'block'})},
          function(){
              $(this).child().css({'display':'none'});
         });
</code></pre>

<p>I know that I can access the hover event, because I coded in some simple alerts, and they were fine. </p>

<p>Originally, I tried giving each 'comments' its ownid (as you can see), but got tripped up in getting the index value. I then decided to try to do this using </p>

<pre><code>      $(this).children('.description').css({'display':'block'});
</code></pre>

<p>But no luck. Am I close? Where am I screwing up the syntax?</p>
