只有在正确的选项卡中调用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 
    } 
    }); 
});