Показать следующий элемент, который не является родственным братом

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() и т. Д. Я не мог заставить его работать. Не могли бы вы помочь?

function moreDetails(obj){ 

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

} 

Answer 1

Изменение find('moreDetails') в find('.moreDetails').

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

ИЛИ

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

ИЛИ

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

РЕДАКТИРОВАТЬ:

Если 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". Итак, используйте style="display:none", чтобы скрыть div в исходном состоянии.

Одним из решений с использованием 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() с .next().

1. Используйте .closest('.currentRow') или .closest('tr'), чтобы получить родительский tr.
2. Используйте .next('.moreDetails'), чтобы получить тр вы хотите, чтобы показать