Question

I have the following jQuery code:

$('.save').submit(function(e){
    var formElement = $(this);
    var data = 'id=' + $(this).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?

Answer 1

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());