Unable to target a specific selector in jQuery
I have the following jQuery code:
$('.save').submit(function(e){
    var formElement = $(this);
    var data = 'id=' + $(th开发者_JAVA技巧is).attr('name') + '&' + $(this).serialize();
    var messageBox = $(this).next('.message');
    messageBox.html('<div class="pending">Saving... please wait...</div>');
    $.post('save.php', data, function(response) {
        messageBox.html(response);
        if(response.indexOf('success') != -1) {
            alert(formElement.closest('li').html());
        }
    });
    e.preventDefault();
});
And this is the HTML that it works with:
<ul class="entries">
   <li id="id8673" class="3">
      <div class="expand">
         <div class="name">...</div>
      </div>
      <div class="entry">
         <div class="description">...</div>
         <form action="index.php." method="post" name="rate8673" class="save">
            <div class="comments">...</div>
            <div class="controls">...</div>
         </form>
         <div class="message">
            <div class="success"></div> // Added by jQuery after form submission
         </div>
       </div>
   </li>
</ul>
Which alerts this when .save gets submitted:
<div class="expand">
  <div class="name">...</div>
</div>
<div class="entry">
  <div class="description">...</div>
</div>
If I update my jQuery code to:
...
alert(formElement.closest('li .entry').html());
...
It alerts this, as expected:
<div class="description">...</div>
But if I updated my jQuery code to this:
...
    alert(formElement.closest('li .expand').html());
...
It alerts this:
NULL
And it should be alerting this:
<div class="name">...</div>
And I can't figure out why NULL? I have removed all javascript except for this function and all HTML elements are immediately available after the page loads, so what am I missing here? Is there a way what NULL is and where it got it from?
http://api.jquery.com/closest
According the to jQuery documentation, .closest() only looks at ancestors. And div.name is not a direct ancestor of the form (it's more like an uncle, but there's no one selector for sibling of a parent).  
You could use:
alert(formElement.parents('li').find('.expand').html());
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论