Jquery選擇正確的div來追加html的困難

HTML片段：

<div class="ThreadComments"> 
    <div class="ActualComments"> 
     <div class="row collapse"> 
      <div class="large-1 columns small-3" align="center"> 
       <img src="http://placehold.it/35x35&text=[img]" /> 
      </div> 
      <div class="large-11 columns"> 
       <p class="speechBubbleSecondary"><strong class="commenter_name">George</strong>Comment text <span class="MRWlabel" MRW-data="">Img</span> 
       </p> 
      </div> 
     </div> 
    </div> 
    <div class="row collapse"> 
     <div class="large-1 columns small-3" align="center"> 
      <img src="http://placehold.it/35x35&text=[img]" /> 
     </div> 
     <div class="large-11 columns"> 
      <textarea class="WP_commentator" style="resize: none; height: 35px; font-size: 12px; padding: 2px;" pi-data="<?= $post['post_id'] ?>"></textarea> 
     </div> 
    </div> 
</div>

我使用基金會5因而重加價，我希望當一個用戶的帖子評論將其追加到ActualComments DIV，問題是我不能設法選擇它，因爲有更多的帖子具有相同的標記。

這是我的AJAX功能：

$('textarea.WP_commentator').focus(function() { 

    $('textarea.WP_commentator').keydown(function (keycheckcode) { 
     if (keycheckcode.keyCode == 13) { 
      var commentText = $(this).val(); 
      var postId = $(this).attr('pi-data'); 
      $.ajax({ 
       type: "post", 
       url: "commentator", 
       data: { 
        comment: commentText, 
        post_id: postId 
       }, 
       success: function (html) { 
        $('textarea.WP_commentator').val(""); 
        append(html); 

       } 
      }); 
     } 
    }); 
});

來源

2014-09-26 Tiberiu

你的問題是什麼？ – 2014-09-26 19:14:54

爲什麼dontcha追加（commentText）而不是追加（html）？ – user1576978 2014-09-26 19:22:07

你也可以考慮在評論div中添加一些帖子標識，比如class =「ActualComments comment-post-233」，甚至在它們加載$ each時添加一些帖子標識（addClass（i）; i ++） – user1576978 2014-09-26 19:23:58

可以緩存你變量，然後使用一些DOM navigation method。

var $this = $(this); 
    var commentText = $this.val(); 
    var postId = $this.attr('pi-data'); 
    $.ajax({ 
     type: "post", 
     url: "commentator", 
     data: {comment: commentText, post_id: postId}, 
     success: function(html) { 
      $this.val("") 
      .closest('.ThreadComments').find('.ActualComments').append(html); 

     } 
    });

來源

2014-09-26 19:19:50

工程很好，謝謝 – Tiberiu 2014-09-26 19:38:26

-1

像

$(".ActualComments").last().append()

來源

2014-09-26 19:16:53 wazz

（可能爲$（「.ActualComments」）.last （）.add（） – wazz 2014-09-26 19:20:21

您無法確定最後一個實例是否正確。 – isherwood 2014-09-26 19:26:00

向我證明它不回答這個問題，我會給你一個垃圾你的想法。 – wazz 2014-09-26 21:30:33

首先，我認爲你的重點功能是多餘的。您需要確定正在輸入哪個元素文本，並將其用於相對DOM遍歷。事情是這樣的：

$('textarea.WP_commentator').keydown(function (keycheckcode) { 

    var myElem = $(this); 

    if (keycheckcode.keyCode == 13) { 
     ... 

     $.ajax({ 
      ... 
      success: function (html) { 
       myElem.closest('.ActualCommentsSibling') 
        .siblings('.ActualComments').append(html); 
      } 
     }); 
    } 
});

我加了一個兄弟元素在裏面，因爲.ActualComments不是myElem的祖先元素。您需要在HTML中爲該元素添加適當的類。

來源

2014-09-26 19:21:15 isherwood

感謝編輯Karl-AndréGagnon。 – isherwood 2014-09-26 19:25:20

+1爲了指出焦點函數沒有必要，我選擇了Karl的答案，因爲它適用於現有的html標記。 – Tiberiu 2014-09-26 19:42:17

是的，我應該再增加一個關卡。週五的大腦。 – isherwood 2014-09-26 19:51:41

Jquery選擇正確的div來追加html的困難

回答

相關問題