Question

我想隐藏最接近点击按钮的跨度，并隐藏按钮。

html就像这样

<!-- the div will be looped using php -->
<!-- this will only be a general idea of the code as the actual is very long and messy -->
<div>       
  <form><!-- This is like the head section -->
    <div>
        <div> <!-- some divs -->
            <button class="btn"></button> <!-- where i want it to work -->
                <div></div><!-- make this 5 times -->
            <span>content to hide</span>
        </div>
    </div>
  </form>      
  <div><!-- Comments to the head are here -->
    <button class="btn"></button><!-- button where it works -->
    <span>contains the comments</span>
  </div>
</div>

脚本

$('.btn').click(function(){
    $(this).hide();
    $(this).next("span").hide();
});

我已经尝试过以下方法：

1. $(this).next("span").hide(); 
2. $(this).closest("span").hide();

仅当我调用所有span元素时才有效。

编辑：在我们到达跨度之前，跨度非常远，因为还有其他元素，如5-10个元素。

Answer 1

这就是您所需要的：JSFiddle

$(this).nextAll("span").first().hide();

nextAll()将查看所有下一个兄弟姐妹（而不仅仅是下一个兄弟姐妹），然后我们只想要找到的第一个范围...... first()实现

另外，closest()无法正常查找树，而不是兄弟姐妹。

Answer 2

编辑2：这个答案选择第一个兄弟跨度，而不是按钮后的第一个兄弟跨度。上面使用$(this).nextAll('span').first().hide()的答案是最好的答案。

$('.btn').click(function(){
    $(this).hide();
    $(this).siblings("span").first().hide();
});

closest()查找DOM树，find()向下看，siblings()正是您要找的。

修改1：在first()之后添加siblings()，仅选择第一个

Answer 3

你可以这样试试：

$('.btn').click(function(){
    var _that=$(this)
    _that.hide();
    _that.parent().find('*').eq(_that.index()+2).hide();
});

https://jsfiddle.net/3z5oyc4n/

+2表示.btn之后的每个元素（+ 1 = div，+ 2 = span）

jQuery从$（这个）不起作用得到最接近的兄弟元素

3 个答案: