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());
精彩评论