Question

我有以下jQuery代码：

$('.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();
});

这是与之配合使用的HTML：

<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>

提交.save时会发出此警告：

<div class="expand">
  <div class="name">...</div>
</div>
<div class="entry">
  <div class="description">...</div>
</div>

如果我将我的jQuery代码更新为：

...

alert(formElement.closest('li .entry').html());

...

正如预期的那样警告这一点：

<div class="description">...</div>

但是如果我将我的jQuery代码更新为：

...

    alert(formElement.closest('li .expand').html());

...

它警告：

NULL

它应该警告这个：

<div class="name">...</div>

我无法弄明白为什么NULL？我已经删除了除此功能之外的所有javascript，并且所有HTML元素在页面加载后立即可用，所以我在这里缺少什么？是NULL是什么方式以及从何处获得它？

Answer 1

http://api.jquery.com/closest

根据jQuery文档，.closest()只关注祖先。并且div.name不是表单的直接祖先（它更像是一个叔叔，但没有一个选择器用于父级的兄弟）。

您可以使用：

alert(formElement.parents('li').find('.expand').html());

无法在jQuery中定位特定的选择器

1 个答案: