兄弟ではない次の要素を表示

Question

私は次のHTMLコードを持っています。ユーザーが 'もっと見る'ボタンをクリックしたときにのみ、クラス 'moreDetails'が表示されます。

<tr class="currentRow"> 
    <td>John</td> 
    <td>Doe</td> 
    <td>johndoe@example.com</td> 

    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td></tr> 
    <tr class = moreDetails> 
    <td> 
      Additional details 
    </td> 
    </tr>   
    <tr> 

ここは私のJavaスクリプトです。私はnext（）、.parent（）、prev（）などのすべてのバージョンを試しました。あなたは助けてもらえますか？ find('.moreDetails')へ

function moreDetails(obj){ 

      $(obj).closest('.currentRow').find('moreDetails').show(); 

} 

Answer 1

変更find('moreDetails')。

$(obj).closest('.currentRow').find('.moreDetails').show(); 

OR

$(obj).parent().next().show(); 

OR

$(obj).parent().next('.moreDetails').show(); 

EDIT：

htmlこの

<tr class="currentRow"> 
    <td>John</td> 
    <td>Doe</td> 
    <td>johndoe@example.com</td> 
    <td><button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button></td> 
</tr> 
<tr class = moreDetails> 
    <td> Additional details</td> 
</tr> 

ある場合

その後

$(this).closest('tr').next().show(); 

Answer 2

1. <tr class = moreDetails>を使用するには、クラス名の前後に引用符が欠落しています。 <tr class="moreDetails">

2. お客様の要件に応じてページが読み込まれると、<tr class="moreDetails"要素を非表示にする必要があります。したがって、初期状態のdivを非表示にするにはstyle="display:none"を使用してください。と

Javascriptを使用して解決策の一つだけ

function moreDetails(){ 
 
    var moreDetailElement = document.querySelector(".moreDetails"); 
 
    moreDetailElement.style.display = "inline"; 
 
}

<table> 
 
<tr class="currentRow"> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>johndoe@example.com</td> 
 

 
    <td><button type="button" class="btn btn-default" onclick="moreDetails()">View More</button></td></tr> 
 
    <tr class="moreDetails" style="display:none"> 
 
    <td> 
 
      Additional details 
 
    </td> 
 
    </tr>   
 
    </table>

Answer 3

$('button').closest('.currentRow').next('.moreDetails').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="currentRow"> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>johndoe@example.com</td> 
 

 
    <td> 
 
     <button type="button" class="btn btn-default" onclick="moreDetails(this)">View More</button> 
 
    </td> 
 
    </tr> 
 
    <tr class='moreDetails'> 
 
    <td> 
 
     Additional details 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
</table>

使用.closest() 0。

1. .closest('.currentRow')または.closest('tr')を使用して親trを取得します。
2. 使用.next('.moreDetails')あなたは