.closest() 获取隐藏的 div 值

Question

I have a question related on how to take the id value of a tag html closest to the element thats has been clicked, the problem is the element where are talking is far away in the html and is also hidden. This is the html :

<div class="panel-group" id="address_AddressList">
    <div style="margin-bottom:15px">
        <a class="btnAddAdress btn-primary btn btn-labeled" href="#" id="btnAddAdress" title="Nueva dirección"><span class="btn-label"><i class="fa fa-plus fa"></i></span>Nueva dirección</a>
    </div>
    <div class="panel panel-default address containerAddresses" id="0" data-placeinlist="0">

        <div class="panel-heading">

        </div>

        <div class="panel-collapse collapse" id="collapseAssignedArea0">
            <div class="panel-body">

            </div>
        </div>
    </div>
    <div class="panel panel-default address containerAddresses" id="1" data-placeinlist="1">

        <div class="panel-heading">

        </div>

        <div class="panel-collapse collapse" id="collapseAssignedArea1" aria-expanded="false" style="height: 0px;">
            <div class="panel-body">

                <div class="AreasContainer" data-urlgetareas="/location/getareas" data-urlsearchareas="/location/searchareas">

                </div>
            </div>
        </div>
    </div>
</div>
<!--Nueva direccion-->
<div>
    <div class="panel-group address_newAddress hidden">
        <div class="panel panel-default address">

            <div class="panel-heading">

            </div>

            <div class="panel-collapse collapse in" id="collapseAssignedArea2">
                <div class="panel-body">


                    <div class="row margin-top-10">
                        <div class="col-md-10">
                            <a class="btn btn-default col-md-12 btnAgregarAddress" data-url="/resource/updateaddresslistadminview" href="#" id="btnSaveAddress" title="Agregar"><i class="fa fa-arrow-up "></i> Agregar</a>
                        </div>
                        <div class="col-md-2">
                            <a class="btn btn-danger col-md-12" href="#" id="btnCancelAddress" title="Cancelar"><i class="fa fa-ban "></i> Cancelar</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And what I want is to take the id value of the last of these divs:

$(".panel.panel-default.address.containerAddresses")

I have tried these:

$('.btn.btn-default.col-md-12.btnAgregarAddress')
    .closest(".panel.panel-default.address.containerAddresses")

$('.btn.btn-default.col-md-12.btnAgregarAddress')
    .closest(".panel.panel-default.address.containerAddresses")
    .siblings("div:hidden").attr("id");

$('.btn.btn-default.col-md-12.btnAgregarAddress')
    .closest(".panel.panel-default.address[div:hidden]")

So what I want is this: 1) from this selector: <a class="btn btn-default col-md-12 btnAgregarAddress" 2) take the id of tha last <div class="panel panel-default address containerAddresses"... </div> It is clear?? How I can get the value of the last(the first element above the clicked one) ?

Answer 1

With your given code, you can target it like this from where you have clicked. You could also target that by using #address_AddressList ID. I am not sure what the requirements are. Honestly, if you put a class or ID on the container div(at highest level without any identifiers), it would make this a lot easier, or target using that ID i mentioned before

 $(".btnAgregarAddress").on("click", function() { var targetID = $(this).closest(".panel-group").parent().prev().find(".containerAddresses").last().get(0).id; // this also works and it is better var targetID2 = $("#address_AddressList").find(".containerAddresses").last().get(0).id; console.log( targetID ); console.log( targetID2 ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="panel-group" id="address_AddressList"> <div style="margin-bottom:15px"> <a class="btnAddAdress btn-primary btn btn-labeled" href="#" id="btnAddAdress" title="Nueva dirección"><span class="btn-label"><i class="fa fa-plus fa"></i></span>Nueva dirección</a> </div> <div class="panel panel-default address containerAddresses" id="0" data-placeinlist="0"> <div class="panel-heading"> </div> <div class="panel-collapse collapse" id="collapseAssignedArea0"> <div class="panel-body"> </div> </div> </div> <div class="panel panel-default address containerAddresses" id="1" data-placeinlist="1"> <div class="panel-heading"> </div> <div class="panel-collapse collapse" id="collapseAssignedArea1" aria-expanded="false" style="height: 0px;"> <div class="panel-body"> <div class="AreasContainer" data-urlgetareas="/location/getareas" data-urlsearchareas="/location/searchareas"> </div> </div> </div> </div> </div> <!--Nueva direccion--> <div> <div class="panel-group address_newAddress hidden"> <div class="panel panel-default address"> <div class="panel-heading"> </div> <div class="panel-collapse collapse in" id="collapseAssignedArea2"> <div class="panel-body"> <div class="row margin-top-10"> <div class="col-md-10"> <a class="btn btn-default col-md-12 btnAgregarAddress" data-url="/resource/updateaddresslistadminview" href="#" id="btnSaveAddress" title="Agregar"><i class="fa fa-arrow-up "></i> Agregar</a> </div> <div class="col-md-2"> <a class="btn btn-danger col-md-12" href="#" id="btnCancelAddress" title="Cancelar"><i class="fa fa-ban "></i> Cancelar</a> </div> </div> </div> </div> </div> </div> </div>