jQuery選擇DOM樹

Question

我有這個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>

現在，在Ajax上成功調用后，我想使用以下代碼將數據加載到名為all_comments的類中：

$(this).parents(".comments").find(".all_comments").html(data);

但無法加載或正常工作。

你能告訴我該怎么做嗎？

更新：

我正在使用的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);
        }
    });
});

Answer 1

嘗試使用that變量和siblings()選擇器

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

注意： this在ajax回調中不起作用

Answer 2

在使用$(this)的上下文中，它不再引用觸發初始事件的元素。 每當您聲明一個新函數時， this改變含義。 ^{*（箭頭功能是一個例外）}

我建議在this更改范圍之前將元素存儲為變量，但實際上您已經在這樣做：

var that = $(this);

您只需要使用它。 我還對選擇器進行了一些更改，使其更適應您可能決定進行的HTML更改。

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

忠告詞：如果要存儲jQuery元素，請在變量前加一個美元符號。 沒有功能上的區別，但是為了可讀性，我建議遵循一個公認的慣例。

var $that = $(this);

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

Answer 3

您可以嘗試以下腳本：

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

您可以在此小提琴上對其進行測試。 我已經嘗試過並且對我來說工作正常。

希望對您有幫助。

Answer 4

除了使用$（this），還可以保存$（“。send_comment”）選擇器的引用。 這樣，您無需重新選擇它，也無需在響應中使用它來找到另一個選擇器（相對於它）：

var sendComment = $(".send_comment");
sendComment.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();   

           sendComment.parent('.comments').first('all_comments').html(data);
        }
    });
});

Answer 5

請嘗試以下方法：

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

Answer 6

jQuery有一個內置的方法this （或任何其他元素）傳遞給您的ajax回調，這是context選項，因此，如果您要將.send_comment傳遞給success回調，請使用context : this ，您將能夠使用$(this)作為對該.send_comment類的引用。

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