jquery next()，find()不工作

q43xntqr 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(106)

我有一个简单的html元素。我想在这个视图中实现slideToggle。我认为它很简单，但我不能找出确切的代码。我想在点击select Room按钮时向下滑动display_room类。我不能使用ID，因为它在循环中。所以，使用类，我需要找到解决方案。
这是我的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>

jquery

来源：https://stackoverflow.com/questions/34939958/jquery-next-find-not-working

2条答案

按热度按时间

ruoxqz4g1#

试试这个parents('.pn_bdy:first')给出最多的父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>

赞(0）回复(0）举报 2023-06-22

lnvxswe22#

根据您的评论删除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>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery next()，find()不工作

2条答案

相关问题

热门标签

最新问答