问题是：
我有一个表单。提交表单时，jQueryAjax函数会将表单中的数据发送到主干。Ajax完成后，我希望提交按钮淡出！我想通过遍历DOM而不是使用ID来访问按钮！我不知道为什么这个区块不起作用：
$('form').submit(function(e) {
e.preventDefault();
$.ajax(
{
url: '../../ctrl_amouzesh/ajax_students_final_record_action',
type: 'POST',
data: $(this).serialize() ,
success: function(data)
{
$('#res').html(data);
var temp = $(this).find('.btn');
temp.fadeOut();
}
}
)
HTML表单：
foreach($members as $member)
{
?>
<form class="form-final-record" role="form" >
<input type="hidden" value="<?php echo $member -> nid?>" name="nid" class="from-nid">
<tr>
<td><?php echo ++$i ?></td>
<td><?php echo $member -> nid?></td>
<td><?php echo $member -> name." ".$member -> surename?></td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">Passed</option><option value="0">Failed</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>No</option>
<option value="1">Yes</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-info" style="display:none">edit</button>
</tr>
</form>
<?php
}
?>
这是我的浏览器看到的（来自页面来源）
<table class="table">
<tr>
<th>ردیف</th>
<th>کدملی</th>
<th>نام و نام خانوادگی</th>
<th>نمره نهایی</th>
<th>وضیعت قبولی</th>
<th>حذف ترم</th>
<th></th>
</tr>
<form class="form-final-record" >
<input type="hidden" value="654321" name="nid" class="from-nid">
<tr>
<td>1</td>
<td>654321</td>
<td>John Jackson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<form class="form-final-record" >
<input type="hidden" value="6523151" name="nid" class="from-nid">
<tr>
<td>2</td>
<td>6523151</td>
<td>Bob Backson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<form class="form-final-record" >
<input type="hidden" value="0049887238" name="nid" class="from-nid">
<tr>
<td>3</td>
<td>09213</td>
<td>Matt Matson</td>
<td><input type="text" name="points" class="form-control" class="form-points" value="0" /></td>
<td><select name="pass" class="form-control"><option value="1">قبولی</option><option value="0">مردودی</option></select></td>
<td>
<select name="absence" class="form-control">
<option value="0" selected>ندارد</option>
<option value="1">غیبت</option>
</select>
</td>
<td>
<button type="submit" class="btn btn-success">ثبت</button>
<button type="submit" class="btn btn-info" style="display:none">ویرایش</button>
</tr>
</form>
<tr><td colspan="5"><button type="submit" class="btn btn-success">ثبت نهایی کلاس</button></td></tr>
</table>
success函数中的this不是单击的元素，而是ajax对象
$('form').submit(function(e) {
e.preventDefault();
var self = this;
$.ajax({
url: '../../ctrl_amouzesh/ajax_students_final_record_action',
type: 'POST',
data: $(this).serialize() ,
success: function(data) {
$('#res').html(data);
$(self).find('[type="submit"]').fadeOut();
}
});
});
$.ajax还有一个名为context的设置，可用于在回调内设置this的值