使用.next（）查找并显示下一个div

Question

我有一些使用PHP动态创建的div和spans。单击跨度时，我希望下一个“添加播放器”div向下滑动。

我想用

$(document).on('click','.plus',function(){
    $(this).find('#add_player').slideToggle();
});

但如果没有“添加播放器”div在span标签内，我就不能这样做......我不想要。

接下来我尝试了：

$(document).on('click','.plus',function(){
    $(this).parent().parent().next('#add_player').slideToggle();
});

这也不起作用。

<div id="roster">

    <div>

        <span class="plus">+</span>

        <div id="add_player">

        </div>

    </div>

</div>

我是否正确构建了HTML？

Answer 1

使用siblings()

$(document).on('click', '.plus', function() {
    $(this).siblings('#add_player').slideToggle();
});

JSFiddle

Answer 2

替代方案你可以这样：

$(document).on('click','.plus',function(){
    $(this).next("div").slideToggle();
});

或

$(document).on('click','.plus',function(){
        $(this).next("#add_player").slideToggle();
    });

fiddle

Answer 3

ID的值是DOM的唯一值，因此您可以直接用户。这将是100％

$('#add_player').slideToggle();

Answer 4

.find（）只返回选择器中的元素，在这种情况下，如你所说，div必须在span标签内。试试这个：

$(document).on('click','.plus',function(){
    $('#add_player').slideToggle();
});