jQuery的 - 追加（項目）最接近類

Question

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var form = $('.formet'); 
    var submit = $('#knappUp'); 

    form.on('submit', function(e) { 
     e.preventDefault(); 

$.ajax({ 
    url: 'ajax_post_com.php', 
    type: 'POST', 
    cache: false, 
    data: $(this).serialize(),   //$(this) = a form 
    beforeSend: function(){ 
     submit.val('Submitting...').attr('disabled', 'disabled'); 
    }, 
    success: function(data){ 
    var item = $(data).hide().fadeIn(800); 
    form.parent().nextAll('.note-block:first').append(item); 
    //GOAL: append(item) onto the .note-block after only (this) form 
    }, 

}, 
    error: function(e){ 
    alert(e); 
    } 
    }); 
}); 
});   
</script> 

頁面持有多<form>的隨後<div class="note-block">循環。 我想要告訴我的jQuery到.append(item)到它發現的下一個（最近的）.note-block。

（今天正在顯示張貼在表格的最後一個數據的所有。注塊上，直到這個頁面被刷新 - 但我不希望刷新頁面 - 很明顯）

這也可能是很簡單 - 但我100％卡在我的腦凍結。

請幫

--UPDATE--

頁環...

echo "<div class='notat' id='typenote".$clients_id."'> 
     <form class='formet' method='post'> 
      <textarea name='note' id='note' placeholder='Legg til notat'></textarea> 
      <input type='text' name='client_id' id='client_id' value='".$clients_id."' style='display:none;' /> 
      <input type='text' name='user' id='user' value='".$class->getCurrentUser('users_fullname')."' style='display:none;'/> 
      <input type='submit' value='SAVE' id='Up'/> 
      <input type='button' class='page-fade' value='CANCEL' id='Down'/> 
     </form> 
    </div>"; 
?> 
<div style="clear:both; height:2px;"></div> 

<?php 
    $note_query = mysql_query(
    "SELECT * FROM ... WHERE client_id = $clients_id ORDER BY note_id DESC"); 
?> 

<div class="note-block"></div> 
    <?php while($nota = mysql_fetch_array($note_query)): ?> 

    <div class="note_post"> 
     <strong><img src='img/user.png' width='15px'> <?php echo $nota['user']?></strong> 
     <?php echo strftime('%e', strtotime($nota['note_created']));?>. 
     <?php echo strftime('%b', strtotime($nota['note_created']));?>. 
     <?php echo strftime('%y', strtotime($nota['note_created']));?> (<?php echo date('H:i',strtotime($nota['note_created']))?>) 
     <br> 
     <p><?php echo $nota['note']?></p> 
    </div> 
<?php end while?> 

--UPDATE--

從url: 'ajax_post_com.php'

數據/項

<div class="note_post"> 
    <img src='img/user.png' width='7.5px'> <?php echo $user?> 
    <?php echo date("j. M. Y");?> (kl. <?php echo date("H:i");?>) 
    <p><?php echo $note?></p> 
</div> 

Answer 1

根據您所提供的HTML，它看起來像.note-block的是形式的父的兄弟姐妹。因此，嘗試：

$(this).parent().nextAll('.note-block').append(item); 

編輯（再次 - 基於OP的新代碼）

在AJAX success處理程序被調用，$(this)可能並不是指原來的表單元素的時間。你可以保存到表單（提交）的提交處理程序的引用，在$.ajax調用中使用：

$(document).ready(function() { 
    var allForms = $('.formet'); 
    var submit = $('#knappUp'); 

    allForms.on('submit', function(e) { 
     e.preventDefault(); 
     //form variable created inside submit handler 
     var thisForm = $(this); 
     $.ajax({ 
      url: 'ajax_post_com.php', 
      type: 'POST', 
      cache: false, 
      //use the form variable 
      data: thisForm.serialize(), 
      beforeSend: function(){ 
       submit.val('Submitting...').attr('disabled', 'disabled'); 
      }, 
      success: function(data){ 
       var item = $(data).hide().fadeIn(800); 
       //use the form variable 
       thisForm.parent().nextAll('.note-block:first').append(item); 
      } 
     }); 
    }); 
}); 

你甚至可以節省.note-block要更新到目標的引用：

allForms.on('submit', function(e) { 
    var thisForm = $(this); 
    var noteBlock = thisForm.parent().nextAll('.note-block:first'); 
    //try console.log(noteBlock); right here to see what it is 
    $.ajax({ 
     ... 
     success: function(data){ 
      var item = $(data).hide().fadeIn(800); 
      //use the noteBlock variable 
      noteBlock.append(item); 
     } 
    }); 
}); 

Answer 2

$(this).next('.note-block').append(item); 

Answer 3

嘗試添加形式呼叫的情況下，並使用它找到的div

$.ajax({ 
    url: 'ajax_post_com.php', 
    type: 'POST', 
    cache: false, 
    data: $(this).serialize(),   //$(this) = a form 
    beforeSend: function(){ 
     submit.val('Submitting...').attr('disabled', 'disabled'); 
    }, 
    context: this, 
    success: function(data){ 
    var item = $(data).hide().fadeIn(800); 
    $(this).parent().nextAll('.note-block:first').append(item); 
    //GOAL: append(item) onto the .note-block after only (this) form 
    },