显示下一个不是兄弟的元素答案

【问题标题】：Display next element which is not a sibling显示下一个不是兄弟的元素
【发布时间】：2017-06-02 06:34:00
【问题描述】：

我有以下 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>         
    <tr>

这是我的 java 脚本。我已经尝试过所有版本的 next()、.parent()、prev() 等。我无法让它工作。你能帮忙吗？

function moreDetails(obj){

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

}

【问题讨论】：

在你的类选择器中添加一个句点，$(obj).closest('.currentRow').find('.moreDetails').show();
抱歉打错了。我原来确实有月经。对此感到抱歉

标签： javascript jquery this next

【解决方案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();

【讨论】：

$(obj).closest('.currentRow').find('.moreDetails').show(); 不能使用这个，因为moreDetails 不是currentRow 的孩子，而是兄弟姐妹

【解决方案2】：

<tr class = moreDetails> 缺少类名周围的引号。应该是<tr class="moreDetails">
页面加载时，根据您的要求，您需要隐藏<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>

【讨论】：

代码不是特定于实例的。添加另一行，它会中断
我也希望其他行也发生同样的事情。所以我不能直接选择那个类并显示它。但无论如何，感谢您的回复并试图帮助我。编码愉快。

【解决方案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() 一起使用。

使用 .closest('.currentRow') 或 .closest('tr') 获取父 tr。
使用.next('.moreDetails') 获取您要显示的tr

【讨论】：