javascript - .closest() 获取隐藏的 div 值

Question

我有一个关于如何获取最接近已单击元素的标签 html 的 id 值的问题，问题是正在说话的元素在 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 的 id 值：

$(".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）取最后一个的id<div class="panel panel-default address containerAddresses"... </div> 很清楚吗？如何获得最后一个（单击的元素上方的第一个元素）的值？

标签： javascriptjqueryhtmlcss

Answer 1

使用您给定的代码，您可以从单击的位置像这样定位它。您也可以使用#address_AddressListID 来定位它。我不确定要求是什么。老实说，如果您在容器 div 上放置一个类或 ID（在没有任何标识符的最高级别），它会使这更容易，或者使用我之前提到的那个 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>