jquery next()、find() 不工作

Question

我有一个简单的 html 元素在视图中。我想在此视图中实现 slideToggle。我认为它很简单，但我想不出确切的代码。单击 select 房间按钮时，我想向下滑动 display_room class。我不能使用 ID，因为它在循环中。因此，使用 class 我需要找到解决方案。

这是我的 html 代码。

<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>

这是我的jquery，我试过了。首次尝试：

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.slc_rm').parents('.pn_bdy').next().find('.display_room').slideToggle();
        });
    });

其次，我试过：

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){

            $(this).parent().parent().next().find(".display_room").slideToggle();
        });
    });
</script>

Answer 1

删除 next() 方法 根据您的评论 slide down the display_room class when clicked on select Room button

<script>
    $(document).ready(function(){
        $(".select_room").click(function(){

            $("#display_room").find(".display_room").slideToggle();
        });
    });
</script>

Answer 2

试试这个 parents('.pn_bdy:first') 给出最多 parent panel-body 和 .next() 给出下一个 div 然后 find(".display_room") .

 $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
    });

$(document).ready(function(){
        $(".select_room").click(function(){
            $(this).parents('.pn_bdy:first').next().find(".display_room").slideToggle();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body pn_bdy" id="hotel-container">
    <div class="col-md-2" style="padding-left: 8px;">

    </div>
    <div class="col-md-6" style="padding-left: 0px;">
        <div class="hotel_name">
            <a href="#"><span style="color: #0896ff">

            </span></a>
            <p class="side_detail"><span style="font-size: 11px; color: #999999">  </span></p>


            <a style="cursor: pointer;" class="show_map" map="map{{$i}}{{$rand}}" lat="" lng=""><p style="margin-top: 8px; color: #337AB7"><b>view on map</b></p></a>
            <div class="map" id="map{{$i}}{{$rand}}"></div>

        </div>
    </div>
    <div class="col-md-2" style="padding-left: 0px;">
        <div class="rating">

        </div>
    </div>
    <div class="col-md-2 slc_rm">
        <p><span style="font-size: 16px; "></span></p>
        <div class="select_room" id="sl_button">
            <span class="btn btn-primary">Select Room</span>
        </div>
    </div>  
</div>
<div class="wrapper-dropdown-menu" id="displayfilterr">
    <div class="display_room">
        Rooms
    </div>
</div>

jquery next()、find() 不工作

jquery next(), find() not working

jquery

find

next