Javascript jQuery选择DOM树

我有这个HTML结构

<div class="comments">
    <div class="like_result"></div>
    <div class="all_comments" style=" max-height: 300px;   overflow: scroll; overflow-x: hidden;">      
    </div>
    <form action="" method="get" accept-charset="utf-8" class="send_comment">
        <div class="row">                       
            <div class="col-md-10">                         
                <textarea name="comment_message" class="form-control comment_text" placeholder="Write your comment"></textarea>
            </div>
            <div class="col-md-1">
                <input type="submit" name="submit" value="Send" class="btn btn-primary">
                <input type="hidden" class="post_id" name="post_id" value="<?php echo $post->posts_id; ?>">
            </div>                      
        </div>
    </form>
</div>

但它没有加载或工作

你能告诉我怎么做吗

更新：

我正在使用的jQuery代码：

$(".send_comment").submit(function(e) {
    e.preventDefault();     
    var that = $(this);
    $.ajax({
        url : 'save-comment.php',
        type : 'POST',
        dattType : 'html',
        data : $(this).serialize(),
        success : function ( data ) {
            // that.prev(".all_comments").append( data );
            // that.find(".comment_text").val(' ');
            // refresh();   
            $(this).parent(".comments").next(".like_result").next(".all_comments").html(data);
        }
    });
});

您可以通过$（“.send_comment”）选择器保存引用，而不是使用$（this）。这样，您就不需要重新选择它，也可以在响应中使用它来查找其他选择器（相对于它）：

---

尝试使用

该

变量和

同级（）

that.siblings('.all_comments').html(data);

注意：
此
在ajax回调中不起作用
在使用
$（this）
的上下文中，它不再指触发初始事件的元素。每当您声明一个新函数时，
此
会更改其含义*（箭头函数是一个例外）

我会建议在
更改范围之前将元素存储为变量，但实际上您已经这样做了：

var that = $(this);

你只需要使用它。我还对选择器进行了一些更改，以使其更能适应将来可能做出的HTML更改

that.closest(".comments").find(".all_comments").html(data);

建议：如果要存储jQuery元素，请在变量前面加上美元符号。没有功能上的区别，但为了便于阅读，我建议遵循一个公认的惯例

var $that = $(this);

请试试这个：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>







$（“.send_comment”）.submit（函数（e）{
e、 预防默认值（）；
var，该值=$（此值）；
$.ajax({
网址：'http://localhost/save-comment.php',
键入：“POST”，
dattType:'html'，
数据：$（this）.serialize（），
成功：功能（数据）{
//该.prev（“.all_comments”）。附加（数据）；
//.find（“.comment_text”）.val（“”）；
//刷新（）；
$（that）.parent（）.find（'.all_comments'）.html（数据）；
}
});
});

您可以尝试以下脚本：

$(document).ready(function(){
$(".btn-primary").click(function(){
//after ajax 
var $that = $(this);
var data='<div>Results</div>';
$(this).parent().parent(".comments").find('.all_comments').html(data);
});
});

$（文档）.ready（函数（）{
$（“.btn主”）。单击（函数（）{
//阿贾克斯之后
var$that=$（this）；
var数据='结果'；
$（this.parent（）.parent（“.comments”）.find（'.all_comments'）.html（数据）；
});
});

你可以用这个来测试。
我已经尽力为自己工作了

希望它能对您有所帮助。
jQuery有一种内置的方法可以将
此
或任何其他元素传递给ajax回调，这是一个选项，因此如果您想传递
。将注释发送到
成功
回调，使用
上下文：此
，这样您就可以使用
$（此）
作为该
的参考。发送注释
类

$(".send_comment").submit(function(e) {
e.preventDefault();
$.ajax({
    url : 'save-comment.php',
    type : 'POST',
    dataType : 'html',
    context : this, // pass "this" here
    data : $(this).serialize(),
    success : function ( data ) {
        // that.prev(".all_comments").append( data );
        // that.find(".comment_text").val(' ');
        // refresh();   
       // $(this) now will refer to the current selected ".send_comment" element     
       $(this).parent(".comments").next(".like_result").next(".all_comments").html(data);
    }
  });
});

我们需要看到围绕这行JavaScript的上下文。如果没有它，我们就无法知道这个
指的是什么，数据是什么，是否正确地等待了
$.ajax
，等等。控制台中是否有错误？如果您在使用console.log（数据）
之前使用它，它是否填充了您期望的值？我已使用新的尝试代码更新了我的问题。您的
成功
函数重新定义了
此
。您已经存储了变量（
var），您只需要使用
that.parents（“.comments”）…
而不是
$（this.parent（.comments”）
。您的注释代码应该能让您很好地了解应该做什么。（提示：尝试使用
that
，而不是
$（this）
）您可以尝试使用此代码吗
that.closest（“.comments”）.find（“.all_comments”）.html（数据）
，parents（）有时会做出奇怪的事情。。这可能是原因吗？与其给他答案，不如做一点解释。我看到控制台日志上没有错误，但成功呼叫后没有显示数据。但是我可以看到返回的数据：（如果您在
success:
函数中
console.log（data）
，它看起来像什么？它返回了：Foyez Ahmed
新评论
非常棒。工作正常：）
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>

<div class="comments">
    <div class="like_result"></div>
    <div class="all_comments" style=" max-height: 300px;   overflow: scroll; overflow-x: hidden;">      
    </div>
    <form action="" method="get" accept-charset="utf-8" class="send_comment">
        <div class="row">                       
            <div class="col-md-10">                         
                <textarea name="comment_message" class="form-control comment_text" placeholder="Write your comment"></textarea>
            </div>
            <div class="col-md-1">
                <input type="submit" name="submit" value="Send" class="btn btn-primary">
                <input type="hidden" class="post_id" name="post_id" value="">
            </div>                      
        </div>
    </form>

</div>
<script>

    $(".send_comment").submit(function(e) {
    e.preventDefault();     
    var that = $(this);
    $.ajax({
        url : 'http://localhost/save-comment.php',
        type : 'POST',
        dattType : 'html',
        data : $(this).serialize(),
        success : function ( data ) {
            // that.prev(".all_comments").append( data );
            // that.find(".comment_text").val(' ');
            // refresh(); 
            $(that).parent().find('.all_comments').html(data);
        }
    });
    });

</script>

$(document).ready(function(){
$(".btn-primary").click(function(){
//after ajax 
var $that = $(this);
var data='<div>Results</div>';
$(this).parent().parent(".comments").find('.all_comments').html(data);
});
});

$(".send_comment").submit(function(e) {
e.preventDefault();
$.ajax({
    url : 'save-comment.php',
    type : 'POST',
    dataType : 'html',
    context : this, // pass "this" here
    data : $(this).serialize(),
    success : function ( data ) {
        // that.prev(".all_comments").append( data );
        // that.find(".comment_text").val(' ');
        // refresh();   
       // $(this) now will refer to the current selected ".send_comment" element     
       $(this).parent(".comments").next(".like_result").next(".all_comments").html(data);
    }
  });
});