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個のタブを設定できます。

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

は、私は現在のタブへのAjaxから受け取った情報を表示したい：私は、ユーザーを拡大し、リンクをクリックして

<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呼び出します。しかし、問題はすべてのタブに情報が表示されることです。すべてのタブの情報を置き換えるだけです。どうすれば修正できますか？ここで

は、より良い理解を得るためにいくつかの画像です： つのタブがあります。

その後、私はそれを拡大する1名をクリックして、ここで私が得るものです。情報は両方のタブを置き換えます。

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