Jquery如何从外部找到元素

Question

我想找到一个元素，它位于我尝试点击的元素之外。

我需要点击＃form-1和slideToggle .business-form-kaufen。 您可以在图片中查看层次结构。

感谢您的帮助！

Answer 1

您需要从按钮上升两个DIV级别，然后转到下一个DIV，并在那里找到.business-form-kaufen。

$(".button").click(function() {
    $(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});

Answer 2

使用.parent()相对

＆＃13;

＆＃13;

$("#form-1").on("click", function(evt) {
  $(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});

＆＃13;

.business-form-kaufen {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
  <div id="kaufen-form-submit">
    <a id="form-1">Unverbindliches ...</a>
  </div>
</div>
<div id="wpcf7-fp09-p448-ol">
  <div class="screen-reader-response"></div>
  <form>
    <div class="business-form-kaufen">
      Lorem ipsum dolor sit amet
    </div>
  </form>

</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您可以编辑html以向id添加一些.business-form-kaufen，或者确保它只是此类的这一个元素，那么您可以更简单地执行此操作：

＆＃13;

＆＃13;

$("#form-1").on("click", function(evt) {
  $(".business-form-kaufen").slideToggle();
  // $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});

＆＃13;

.business-form-kaufen {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
  <div id="kaufen-form-submit">
    <a id="form-1">Unverbindliches ...</a>
  </div>
</div>
<div id="wpcf7-fp09-p448-ol">
  <div class="screen-reader-response"></div>
  <form>
    <div class="business-form-kaufen">
      Lorem ipsum dolor sit amet
    </div>
  </form>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为form和business-form-kaufen是1比1的关系？我将它们放在一个容器中，然后使用parents()查找容器，然后find()查找business-form-kaufen。

这样，代码非常智能，可以查找business-form-kaufen，而无需对DOM结构进行硬编码。