jquery如何从外部查找元素

Question

我想找到一个元素，这是我试图单击的元素之外。

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

感谢您的帮助！

Answer 1

使用.parent()相对

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

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

<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>

或者，如果你可以编辑你的HTML一些id添加到.business-form-kaufen或者确保它是仅此单一元素你可以做得更简单：

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

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

<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>

Answer 2

你需要从按钮走了两个DIV水平，然后进入下一个DIV，并在那里找到.business-form-kaufen。

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

Answer 3

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

这样，代码足够智能，无需硬编码DOM结构即可查找business-form-kaufen。