.closest () чтобы получить скрытое значение div

Question

У меня есть вопрос, связанный с тем, как получить значение идентификатора тега html, ближайшего к элементу, по которому щелкнули, проблема в том, что элемент разговора находится далеко в html и также скрыт , Это 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>

И я хочу взять значение идентификатора последнего из этих div:

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

Я пробовал это:

$('.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]")

Итак, что я хочу, это: 1) из этого селектора: <a class="btn btn-default col-md-12 btnAgregarAddress" 2) взять идентификатор последнего <div class="panel panel-default address containerAddresses"... </div> Понятно ?? Как я могу получить значение последнего (первый элемент выше кликаемого)?

Answer 1

С помощью данного кода вы можете настроить таргетинг на него, как показано ниже. Вы также можете настроить таргетинг, используя #address_AddressList ID. Я не уверен, каковы требования. Честно говоря, если вы поместите класс или идентификатор в контейнерную ячейку (на самом высоком уровне без каких-либо идентификаторов), это сделает это намного проще, или цель будет с использованием того идентификатора, который я упоминал ранее

$(".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>