insertBefore()，before()和Nearest - 在我需要的地方插入数据

Question

我正在尝试使用 insertBefore(( 在分隔符class="replydivider"之前插入一些 HTML，但我无法让它工作。这是我的代码：

<div class="col-sm-12 mb-2 replydivider">
<div class="row">
<div class="col-sm-2 offset-1">
<img src="/assets/uploads/user/<?=$_SESSION['userImage'];?>" class="border rounded-circle comment-user-img mr-3">
</div>
<div class="col-sm-8 rounded form-inline">
<form method="POST" class="form-group reply-form">
<input type="text" name="comment" class="form-control mr-2" placeholder="Reply here" required>
<input type="hidden" name="postId" value="<?=$id?>">
<input type ="hidden" name="replyId" value="<?=$row['commentId'];?>">
<input type="submit" class="btn-sm btn-primary" value="Reply">
</form>
</div>
</div>
</div>

我遇到的问题是它必须插入相对于提交的表单的div 之前，因为页面上会有很多回复分隔线和表单。

我已经尝试了以下和无数的变化，但无法让它工作：

$(this).closest('.replydivider').before(data);
$(this).closest('div').find(".replydivider").before(data);
$(this).closest('form').find(".replydivider").before(data);
$(data).insertBefore('.replydivider');

任何指导将不胜感激。

编辑：

这是我的jquery函数：

$(function () {
$('.reply-form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '/comment/addComment',
data: $(this).serialize(),
success: function (data) {
alert('test');
var test = "<p>Sample data</p>";
$(this).closest('.replydivider').before(test);
}
});
$(this).closest('form').find("input[type=text]").val("");
});
});

有趣的是，如果我把$(this).closest('.replydivider').before(test);行放在 ajax 调用之外，它可以工作，但不能在它里面。我把警报放在那里以测试它是否成功返回，确实如此。

Answer 1

.ajax((

所有回调中的this引用是传递给设置中$.ajax的上下文选项中的对象;如果未指定上下文，则这是对 Ajax 设置本身的引用。

如果您希望回调中的this是接收事件的元素，请设置 Ajax 的上下文属性，如下所示：

.......
context:this,
success: function (data) {
.......