只有在正確的選項卡中調用Ajax後顯示信息

Question

我有jquery選項卡。每個選項卡名稱取自數據庫：

<div id="tabs"> 
<ul> 
<?php 
$hod_result = getFamilyTree(); 
$i = 0; 
while($hod_row = mysqli_fetch_array($hod_result)) 
{ 
?> 
    <li> 
     <a href="#<?php echo $hod_row["staff_id"]?>" ><span class="closer" data-id3="<?php echo $hod_row["staff_id"] ?>">x</span><?php echo $hod_row["longname"].' ('.$hod_row["team_role"].')' ?></a>    
    </li> 
<?php $i++;} ?> 
</ul> 
<?php 
$hod_result_tabs = getFamilyTree(); 
$i_tabs = 0; 
while($hod_row_tabs = mysqli_fetch_array($hod_result_tabs)) 
{  
?>  
    <div id="<?php echo $hod_row_tabs["staff_id"]?>"> 
    <!--<div class="test"></div>--> 
    <div class="tree" id="<?php echo $hod_row_tabs["staff_id"]?>"> 
    <ul> 
    <li> 
    <?php 
    $hod_id_list = $hod_row_tabs["staff_id"]; 
    $sv_result_list= getSupervisorRole($hod_id_list); 
    ?> 
    <a href="#"> 
     <table> 
     <tr> 
      <th colspan="3">Head Of The Department:</th>  
     </tr> 
     <tr> 
      <td> 
       <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo substr($hod_row_tabs["team_role"], 0, 3); ?></a> 
       <span class="closer" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>">x</span> 
       <?php echo $hod_row_tabs["staff_id"].' '.$hod_row_tabs["username"]; ?> 
       <span class="create-user" data-id3="<?php echo $hod_row_tabs["staff_id"].'|Supervisor';?>"><img alt="" src="imagesAssessment/add.png"></span> 
       <span class="btn_details" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>"> <img title="View Evaluation Details" src="imagesAssessment/details.png"></span> 
      </td>    
     </tr> 
     </table> 
    </a> 
     <ul> 
     <?php 
     $sv_result= getSupervisorRole($hod_id_list); 
     if(mysqli_num_rows($sv_result) > 0){ 
      while($sv_row = mysqli_fetch_array($sv_result)) 
      { 
     ?> 
     <li> 
      <a href="#" > 
       <table style='all:unset;'> 
       <tr> 
        <td> 
         <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo strtoupper(substr($sv_row["team_role"], 0, 3)); ?></a> 
         <span class="closer" data-id3="<?php echo $sv_row["staff_id"]; ?>">x</span> 
         <a href="#" style='all:unset;' class="expand" data-id3="<?php echo $sv_row["staff_id"].'|'.$sv_row["username"].'|'.$sv_row["importance"]; ?>"> 
         <?php echo $sv_row["username"]; ?> 
         </a> 
        </td> 
       </tr>       
       <tr> 
        <td> 
         <?php echo $sv_row["staff_id"]; ?> 
         <span class="create-user" data-id3="<?php echo $sv_row["staff_id"].'|Checker'; ?>"><img alt="" src="imagesAssessment/add.png"></span> 
         <span class="btn_details" data-id3="<?php echo $sv_row["staff_id"]; ?>"> <img title="View Evaluation Details" src="imagesAssessment/details.png"></span> 
        </td> 
       </tr> 
       </table> 
      </a> 

     </li> 
     <?php }} ?> 
     </ul> 
    </li> 
    </ul> 
    </div> 
    <div class="input"></div> 
    </div> 
<?php $i_tabs++;} ?> 
</div> 

根據表中有多少用戶，它最多可以有10個選項卡。所以，當我想擴大用戶通過點擊<a href="#" style='all:unset;' class="expand" data-id3="<?php echo $sv_row["staff_id"].'|'.$sv_row["username"].'|'.$sv_row["importance"]; ?>"><?php echo $sv_row["username"]; ?> </a>

通過點擊鏈接查看更多信息我叫AJAX：

$(document).on('click', '.expand', function(){ 
    var view_current = $(this).data("id3"); 
    $.ajax({ 
     url: "comAssessment/hr_tree_selected.php", 
     method: "POST", 
     data: {view_current: view_current}, 
     dataType:"text", 
     success: function (data) { 
      $('.tree').html(data).slideDown("slow"); 
     } 
    }); 
}); 

我想顯示從阿賈克斯到當前的標籤接收到的信息。但問題是信息顯示在每個選項卡中。它只是取代每個標籤中的信息。我該如何解決這個問題？

這裏有一些圖片，以獲得更好的理解： 有兩個標籤：

然後我就一個名字單擊展開它，這裏是我所得到的。信息替換兩個製表符：

Answer 1

您可以試試這個。

$(document).on('click', '.expand', function(){ 
    var view_current = $(this).data("id3"); 
    var that = this; 
    $.ajax({ 
     url: "comAssessment/hr_tree_selected.php", 
     method: "POST", 
     data: {view_current: view_current}, 
     dataType:"text", 
     success: function (data) { 
     //$('.tree').html(data).slideDown("slow"); 
     $(that).closest('.tree').html(data).slideDown("slow"); // use this line 
    } 
    }); 
});