Cannot retrieve an element farther up the DOM.

Cannot retrieve an element farther up the DOM.

JQuery 1.4


I cannot get this line to return anything but null:


alert($(this).closest("div.cr").html());
Any ideas on why not? I have tried using parents("div.cr:first") with no luck as well.

Thanks!

Randy


Here is my sample code. 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.4.min.js"></script> <script type="text/javascript"> $(function(){ $(".mcf").live('submit',function(){ alert($(this).closest("div.cr").html()); //alert($(".mcf").closest(".cr").html()); alert($("div.cr").html()); //alert($(this).html()); return false; }); }); </script> </head> <body> <div id="results"> 
     <div class="middle-box-top"></div> <div class="middle-box"> <span class="arrow-left"><a href="/">Go Left</a></span> <div class="middle-box-small events-box-small"> <div class="middle-box-small-top"></div> <div class="middle-box-small-middle"> <span class="offline-icon"></span><p><a class="mbsm-name" href="/">Name</a> </p><div class="hhe">test <a class="mbsm-view-more" href="/">...view more</a></div> </div> 
     <div class="middle-box-small-bottom"></div> </div> <span class="arrow-right"><a href="/">Go Right</a></span> </div> <div class="middle-box-bottom"></div> <span class="comment-spacer"><a href="/"></a></span> <div class="cr">HERE</div> <div class="comment-box-wrap"> <div class="comment-input-button"> 
     <form method="post" class="mcf" action="/index.cfm/news/create"> <input type="hidden" value="285" name="comment[postid]" id="comment-postid"> <input type="hidden" value="" name="comment[parentid]" id="comment-parentid"> <label for="comment-comment">Comment<textarea name="comment[comment]" id="comment-comment"></textarea></label> <input type="hidden" value="" name="comment[lat]" id="comment-lat"> 
     <input type="hidden" value="" name="comment[lon]" id="comment-lon"> <button type="submit">comment</button> </form> </div> </div> </div> </body> </html> 
     
    2.