如何使用父JQuery选择第二个子节点

Question

我有以下结构

<div class="a">
    <button type="button" class="btn btn-default btn-sm" id="proccesing-btn-down">...</button>
    <button type="button" class="btn btn-default btn-sm" id="proccesing-btn-up" style="display: none;">...</button>
</div 

点击onclick时，我有一个proccesing-btn-down功能 我想要隐藏向上按钮并显示向下按钮。

$(this).hide();
var btn = $(this).parent().$("#proccesing-btn-up");
$(btn).show();

隐藏这个 - 正在发挥作用。 第二和第三行有什么问题？

Answer 1

如果它们是div中的唯一元素，则可以执行以下操作：

$('.btn.btn-default').on('click', function(){
  $(this).hide().siblings().show();
}):

<强> FIddle

如果他们不是，您必须将选择器传递给siblings('.btn')以了解更多信息，请查看documentation。

Answer 2

试试这个：

$(this).hide();
$(this).siblings().show();

Answer 3

Closest将在类中查找最接近dom元素。

$(this).hide();
var btn = $(this).closest('.a').find("#proccesing-btn-up");
$(btn).show();