Javascript 提交ajax后，jquery在表单内选择div

我有一个包含许多表单的页面，每一行表中有一个表单。我想提交表单，获得ajax响应，然后显示一个绿色的复选标记或红色的x来表示成功或失败（无需重新加载页面）

如何仅在提交的表单中选择

.file success

或

.file error

span

<form method="POST" action="#" class="fileform">
    <tr>
        <td class="vert-align"><input type="text" name="name" id="name" /></td>
        <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
        <div class="feedback-icons">
            <span class="file-success"><i class="fa fa-check-circle"></i></span>
            <span class="file-error"><i class="fa fa-times-circle"></i></span>
        </div>
        </td>
    </tr>
</form>
... many more forms like this in table rows

---

谢谢大家!

您应该将

$（this）

定义为一个变量，由于闭包规则，该变量一旦被访问，就可以访问

(".fileform").submit(function(e){
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    // Define $(this) as a variable that is accessible to any function defined after this.
    var self = $(this);
    $.ajax({
        url : formURL,
        type: "POST",
        data : postData,
        context: e.target,
        // You can ommit the status and jqXHR as you don't use them
        success:function(data){
           // Now use `self` and it works
           self.find('.file-success').fadeIn(500);
        },
        // And here you can ommit them to - if you want the text status, just use error.statusText
        error: function(error){    
            $('.file-error').fadeIn(500);
        }
    });
    e.preventDefault();
});

正如@JamesMontagne提到的，您使用的是上下文，如果我正确阅读jQuery文档，它会更改您的

这个
对象。由于事件的目标是按钮，因此您的
$（此）
解决方案将无法工作

因为这需要一个ajax请求，所以我不能真的伪造这个完整的请求，但是看看jQuery文档可以看到一个很好的示例：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" ); // adds done class to the BODY, not the form
});

以下是文档：
在您的函数中
$（此）
将对应于上述函数的元素。想不出更好的解释方法，所以这里有一个例子

 $('element').function(){
     $(this);//this is element
     $.ajax({
     exampleFunction:function(){
         $(this);//would probably be ajax
     },
     });
 });

因此，要找到您的元素，请尝试以下选择器/方法

$('.file-success','.fileform')
$('.file-success')

$('.fileform').submit(function(){
    var self=this;
    $ajax({
        success:function(result){
            if(result=="true")$('.file-success',self).show();
        }
    });
});

进一步帮助

这是一种向函数添加变量的方法，在调用具有唯一变量的多个函数时非常方便

function build(var r){
    this.r=r;//this corresponds to build function or an element you set to build
}

@JamesMontagne正在研究这个问题，但是堆栈溢出使用
tab
在输入之间切换这一事实意味着它被过早地发布了，这不是问题。虽然这种方法可行，但对于使用
context:e.target，
的问题的解决方案为什么不起作用，有什么建议吗？我已经尝试过了，但它对我不起作用。如果我只执行$（'.file success'）。。。所有图标都会淡入，告诉我可以选择跨距，但我无法选择我想要的跨距。谢谢你的代码改进建议。@split19你能在中重现你的问题吗？此解决方案以及您在使用
context
问题中发布的解决方案应仅适用于提供的信息。@split19请参阅此显示代码正常工作的工作示例：@mplungjan我正在打开。虽然问题很微妙，但使用
context
使这个问题有点不同。使用
context:e.target
应该改变这一点，这样
这个
就是
e.target
@JamesMontagne不应该
context
就是
$（self）
在我的示例中，那么？在ajax选项对象上设置context属性定义了该
在ajax回调中引用的内容。您使用
self
的方法会很好，但是原始问题设置
上下文的方法；e、 目标
应该同样有效。切勿使用上下文
。你能把var
self
传给它吗？而不是e.target？我认为jQuery处理事件的方式不同。所以可能使用
event.target.nodeName
？请参见另一个答案上的注释。问题不可复制，代码按原样工作。
function build(var r){
    this.r=r;//this corresponds to build function or an element you set to build
}